Skip to content
Related Articles

Related Articles

Improve Article
How to use autocomplete search in jQuery ?
  • Last Updated : 16 Apr, 2021

In this article, we are going to see how to use search auto-complete in JQuery. For this, we are going to use the jQuery inbuilt function called autocomplete. We will do that in two different stages.

  • Create a basic HTML file and add an input bar to it.
  • Implement the autocomplete functionality.

HTML Code: Here we will create the structure to take the input from the user and attach the jQuery CDN link in the head section.

Add jQuery scripts into your HTML file:

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

index.html






<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Jquery Autocomplete</title>
    </script>
    </script>
</head>
  
<body>
    <input type="text" 
           id="auto" 
           placeholder="enter something" />
</body>
  
</html>

jQuery Code: For this, we are going to use the jQuery inbuilt function called autocomplete. This function takes a list of words as a source. And when we type any character it will search from the given list and shows the output if any available.

Syntax: 

    $("TagId").autocomplete({
        source : itemList  // List of Words. 
    })

Javascript




$(document).ready(function() {
    // array of items.
    var items = [
        "C++",
        "Java",
        "Python",
        "C#",
        "DSA",
        "STL",
        "Self Placed",
        "Android",
        "Kotlin",
        "GeeksforGeeks",
        "GFG",
    ];
    // jQuery inbuild function
    $("#auto").autocomplete({
        source: items // list of items.
    });
})

Output: After cob inig both the code section we will get the below output.




My Personal Notes arrow_drop_up
Recommended Articles
Page :