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.

Add Search to your Website

 

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like