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

📅  最后修改于: 2021-11-24 05:42:35             🧑  作者: Mango

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

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

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

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

index.html


  

    
    
    
    Jquery Autocomplete
    
    

  

    

  


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


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 两个代码部分之后,我们将得到以下输出。