Jquery UI Autocomplete widget
In this article, we will see about jquery ui autocomplete widget example.
What is autocomplete widget?
It simplifies the search for an item in a pre-populated list of values. Step by step, it filters out the list of values based on the given search string from the pre-populated list of values.
Step-by-step guide to Creating autocomplete
1. Create a new HTML document with basic HTML document structure code by linking jqueryUI library files
<!DOCTYPE html>
<html>
<head>
<title>Auto Complete Demo</title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
</script>
</body>
</html>2. To create an auto-complete widget; we need to create a text input filed
<input type="text" id="autocomplete"/>3. Select the element using the jQuery selector and call autocomplete jQuery UI function on it and pass an object with its source value set to an array of values.
<script type ="text/javascript">
$("#autocomplete").autocomplete({source:["AI", "CG", "DS", "OS"]});
</script>4. Output:
If you follow these steps perfectly, Your output will look like the image below.
The output is displayed as a search bar when users search for any queries the suggestion will be shown below the search bar like the google, youtube search bar.