How to make basic Autocomplete using jQuery UI ?

Last Updated : 27 Jan, 2021

jQuery UI Autocomplete can be used for providing auto-completion support for text fields in the webpage. The local Autocompleter is used when auto-completion options are given as an array to the Autocompleter to display as the choices.

Approach: First, add jQuery UI scripts needed for your project.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link href= “http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

Example:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
              content="width=device-width,
                       initial-scale=1" />
  
        <script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
      </script>
  
        <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
      </script>
  
        <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" 
              rel="stylesheet" 
              type="text/css" />
  
        <style>
            .height {
                height: 10px;
            }
        </style>
  
        <script>
            $(function () {
                var list = ["One", "Two", "Three", "Four"];
                $("#gfg").autocomplete({
                    source: list,
                });
            });
        </script>
    </head>
  
    <body>
        <div class="ui-widget">
            <p>GeeksforGeeks</p>
  
            <label for="gfg">Tags: </label>
            <input id="gfg" />
        </div>
    </body>
</html>

Output:

My Personal Notes

Related Articles

HTML