Jquery实现搜索框提示功能示例代码

2020-05-22 15:46:48易采站长站整理

} else if (event.keyCode == 40) {
if (current.length > 0) {
var nextLi = current.removeClass(‘hover’).next();
if (nextLi.length > 0) {
nextLi.addClass(‘hover’);
input.val(nextLi.html());
}
} else {
var first = suggestWrap.find(‘li:first’);
first.addClass(‘hover’);
input.val(first.html());
}
}
//输入字符
} else {
var valText = $.trim(input.val());
if (valText == ” || valText == key) {
return;
}
searchFuc(valText);
key = valText;
}
}
//请求返回后,执行数据展示
this.dataDisplay = function(data) {
if (data.length <= 0) {
suggestWrap.hide();
return;
}
//往搜索框下拉建议显示栏中添加条目并显示
var li;
var tmpFrag = document.createDocumentFragment();
suggestWrap.find(‘ul’).html(”);
for (var i = 0; i < data.length; i++) {
li = document.createElement(‘LI’);
li.innerHTML = data[i];
tmpFrag.appendChild(li);
}
suggestWrap.find(‘ul’).append(tmpFrag);
suggestWrap.show();
//为下拉选项绑定鼠标事件,实现鼠标点击选取
suggestWrap.find(‘li’).hover(function() {
suggestWrap.find(‘li’).removeClass(‘hover’);
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
}).bind(‘mousedown’, function() {
input.val(this.innerHTML);
suggestWrap.hide();
searchsubmit.click();
});
}
init();
};
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名
var searchSuggest = new oSearchSuggest(sendKeyWordToBack);
//这是一个模似函数,实现向后台发送ajax查询请求,并返回一个查询结果数据,传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求
//参数为一个字符串,是搜索输入框中当前的内容
function sendKeyWordToBack(keyword) {
var sSearchKey = $(“#search”).val();
$(“#search”).bind(“input propertychange”, function(event) {
sSearchKey = $(“#search”).val();
});
$.ajax({
url: “WebService/wbsBLL.asmx/GetSearchInfo”, //后台webservice里的方法名称根据自己需要实现返回数据位json
type: “POST”,
dataType: “json”,
async: false,
contentType: “application/json; charset=utf-8”,
data: ‘{“sKeyName”:”‘ + sSearchKey + ‘”}’,
traditional: false,
beforeSend: function(x) { x.setRequestHeader(“Content-Type”, “application/json; charset=utf-8”); },
success: function(data) {
var aData = [];
for (var i in data) {
var jsonObj = $.parseJSON(data[i]);
for (var item in jsonObj) {
jsonObj = eval(jsonObj.SeachTable);
for (var i = 0; i < jsonObj.length; i++) {