How to use autocomplete search in jQuery ?

Last Updated : 03 Apr, 2023

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 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> 
    <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. 
    }); 
})

Complete Code:

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 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> 
    <script> 
        $(document).ready(function() { 
            // List of Items   
            var items = [ 
                "C++", 
                "Java", 
                "Python", 
                "C#", 
                "DSA", 
                "STL", 
                "Self Placed", 
                "Android", 
                "Kotlin", 
                "GeeksforGeeks", 
                "GFG", 
            ]; 
            // jQuery inbuild function. 
            $("#auto").autocomplete({ 
                // This function takes words list as a source. 
                source: items  
            }); 
        }) 
    </script> 
</head> 
  
<body> 
    <input type="text" 
           id="auto" 
           placeholder="enter something" /> 
</body> 
  
</html>