Autocomplete Input using jQuery UI

In this tutorial, we are going to create an Autocomplete Input element using jQueryUI.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Follow this video for complete guidance :

In order to use jQuery UI, we need to include jQuery in our webpage.

The following files are to be included in our webpage :

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

Remember : jQuery UI javascript file should be loaded after jQuery.

Create a HTML input element :

<input id="tags">

Now, initialize the autocomplete as follows :

<script type="text/javascript">
  var availableTags = ['Football','Cricket','Basketball','Baseball'];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
</script>

Full Source Code :

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">


<input id="tags">


<script type="text/javascript">
  var availableTags = ['Football','Cricket','Basketball','Baseball'];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
</script>

 



Recommended For You

About the Author: Admin