Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

How to create jQuery UI Autocomplete ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


  • 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.




<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" 
    <script src=
    <script src=
<body style="border:2px solid green;min-height:240px;">
    <div style="display:flex; justify-content:center">
        <h1 style="color:green;">
    <div class="ui-widget" style="display:flex;
        <input id="langs" placeholder="Your Favorite language">
        $(function () {
            let availableTags = [
                source: availableTags



My Personal Notes arrow_drop_up
Last Updated : 11 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials