How to create jQuery UI Autocomplete ? Last Updated : 11 Sep, 2021 Comments Improve Suggest changes Like Article Like Report 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> Output: Output Comment More infoAdvertise with us Next Article How to create jQuery UI Autocomplete ? debadebaduttapanda7 Follow Improve Article Tags : Web Technologies JQuery Blogathon Blogathon-2021 jQuery-Methods jQuery-UI jQuery-Questions +3 More Similar Reads jQuery UI Autocomplete create Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of val 2 min read How to enable an autocomplete in jQuery UI ? To enable autocomplete in jQuery UI, we will be using the enable() method. jQuery UI enable() method is used to enable the autocomplete. It returns the accordion element completely to its initial state. Syntax: $(".selector" ).autocomplete("enable")Parameters: This method does not accept any paramet 1 min read jQuery UI Autocomplete enable() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of val 1 min read jQuery UI Autocomplete classes Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete classes option is used to add some extra classes to add the styles to the elements. Syntax: $( ".selector" 1 min read jQuery UI Autocomplete destroy() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of val 2 min read Like