JQuery Autocomplete

New Melchizedec

Apr 03, 2023

Rate this article

Share this article

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: More on this is covered in jquery autocomplete.