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.

 

Categories: autocomplete

govind dhonddev

Govind Dhonddev is a Software Engineer at ExpertRec, who loves coding, food and writing blogs.