html5 模糊匹配搜索框-优快云博客

本文介绍如何在项目中使用Bootstrap3-Typeahead.js插件实现输入框的自动补全功能，包括引用文件、配置input控件及编写JavaScript代码的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用bootstrap3-typeahead.js

引用：

 <script type="text/javascript" src="@Url.Content("XXXXX/bootstrap3-typeahead.js")" charset="UTF-8"></script>

input控件

<input id="local_data" autocomplete="off" data-provide="typeahead" type="text" style="background: white"
                               class="input-sm form-control" placeholder="输入关键字以搜索" />

JS样例代码

var initSearchLabel = function () {
    var resultKeyAndValue = {};
    $("#local_data").typeahead({
        source: function (query, process) {
            //query是输入的值
            var names = new Array();
            $.ajax({
                type: "GET",
                url: "XXXXXXXX",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                cache: false,
                traditional: true,
                async: false,
                success: function (result) {
                    result = JSON.parse(result);
                   //处理得到的JSON数据，var resultList = JSON.parse(result);
　　　　　　　　　　　//如果得到的数据是对象数组而不是字符串数组，将要显示的搜索结果处理为一个字符串数组并返回　;
　　　　　　　　　　 //如果在选中以后的处理方法中还需要被选中对象的其他参数，可以将选中的字符串与使用的其他参数做成一个Dictionary备用
                    for (var i = 0; i < resultList.length; i++) {
                        names.push(resultList[i].NAME);
                    }
                    return process(names);
                },
                error: function (result) { }
            });
        },
        updater: function (item) {
　　　　　　//选中以后的数据处理。item为选中的字符串，resultKeyAndValue为success函数红提到的备用Dictionary，在此取出需要用到的参数。
            var info = resultKeyAndValue[item];var name = info["name"];
            $.ajax({
                type: "GET",
                url: "YYYYYYYYYYYYYYY" ,
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                cache: false,
                traditional: true,
                async: false,
                success: function (result) {
                    result = JSON.parse(result);
                },
                error: function (result) { }
            });
            return item;
        },
        items: 100,//显示的搜索结果
        delay: 500  //input控件中数据发生变化以后执行请求的间隔
    });
}