JQuery UI Autocomplete Widget | Explained

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.

 jquery ui autocomplete widget exampleThe 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.

Leave a Reply