html5 模糊匹配搜索框

时间:2022-11-07 06:32:17

使用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控件中数据发生变化以后执行请求的间隔
});
}

该方法匹配的是完整字符串,还达不到百度输入框中的 多个关键字匹配方式