如何在 jQuery 中使用自动完成搜索？

在本文中，我们将了解如何在 JQuery 中使用搜索自动完成功能。为此，我们将使用名为 autocomplete 的 jQuery 内置函数。我们将在两个不同的阶段做到这一点。

• 创建一个基本的 HTML 文件并向其添加一个输入栏。
• 实现自动完成功能。

HTML 代码：在这里，我们将创建结构以获取用户的输入并在 head 部分附加 jQuery CDN 链接。

将 jQuery 脚本添加到您的 HTML 文件中：

index.html

  

    
    
    
    Jquery Autocomplete
    
    
    
    

  

    

  

jQuery 代码：为此，我们将使用名为 autocomplete 的 jQuery 内置函数。此函数以单词列表作为源。当我们输入任何字符，它将从给定的列表中搜索并显示输出（如果有）。

句法：

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

输出：在 cob inig 两个代码部分之后，我们将得到以下输出。