How to create jQuery UI Autocomplete ?

Last Updated : 11 Sep, 2021

In this article, we are going to see how to make an input filed (input text) autocomplete. To do this, we use the jquery UI library. Here we take the input field where users have the ability to easily find and select from a pre-populated list of values by typing in search terms and filters.

Steps:

Include the CDN path of jQuery UI library in a particular order followed by below code, this step is followed for both CSS and JavaScript.
After including the jQuery CDN file, you have to attach a <script> tag at the end of the body tag or immediate before the body tag.
Then follow the template of autocomplete API function provided by jQuery UI.

Syntax:

$(element).autocomplete(options);

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <title>jQuery UI Autocomplete</title> 
    <link rel="stylesheet" href= 
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" 
        href="/resources/demos/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> 
</head> 
  
<body style="border:2px solid green;min-height:240px;"> 
    <div style="display:flex; justify-content:center"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
    </div> 
  
    <div class="ui-widget" style="display:flex; 
        justify-content:center;margin-top:20px;"> 
        <input id="langs" placeholder="Your Favorite language"> 
    </div> 
  
    <script> 
        $(function () { 
            let availableTags = [ 
                "ActionScript", 
                "AppleScript", 
                "Asp", 
                "BASIC", 
                "C", 
                "C++", 
                "Clojure", 
                "COBOL", 
                "ColdFusion", 
                "Erlang", 
                "Fortran", 
                "Groovy", 
                "Haskell", 
                "Java", 
                "JavaScript", 
                "Lisp", 
                "Perl", 
                "PHP", 
                "Python", 
                "Ruby", 
                "Scala", 
                "Scheme" 
            ]; 
            $("#langs").autocomplete({ 
                source: availableTags 
            }); 
        }); 
    </script> 
</body> 
  
</html>