expertrec jquery autocomplete

JQuery Autocomplete

Rate this article

Share this article
expertrec jquery autocomplete

Autocomplete widgets provide suggestions while you type into the field. 

Any input field can be powered with an autocomplete feature. While typing in that input field, suggestions for the typed query are searched and displayed to a user.

Jquery is a lightweight and extremely powerful javascript library and here we will discuss how to implement jquery autocomplete.

We will create an HTML page and include jquery javascript in it as shown below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var data = [
      "DataBase",
      "Data Analytics",
      "Data Reports",
      "Design and Analysis"
    ];
    $( "#tags" ).autocomplete({
      source: data
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget center">
  <label for="tags">Suggestions: </label>
  <input id="tags">
</div>
 
</body>
</html>

some of the styles are clubbed and kept in styles.css as shown below:

body {
	font-family: Arial, Helvetica, sans-serif;
}

table {
	font-size: 1em;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}

.center {
  margin: auto;
  width: 50%;
  border: 3px solid #1616d8;
  padding: 10px;
}

These are the minimum requirements for running the basic demo as below:

jquery basic demo

More on this is covered in jquery autocomplete.

 

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.

You may also like