首页 > 代码库 > 仿百度的输入提示功能
仿百度的输入提示功能
/// <reference path="jquery-1.7.1.min.js" />
//实现搜索输入框的输入提示js类
function oSearchSuggest(searchFuc) {
var input = $(‘#txtNaviSearchBox‘);
var suggestWrap = $(‘#gov_search_suggest‘);
var key = "";
var init = function () {
input.bind(‘keyup‘, sendKeyWord);
input.bind(‘blur‘, function () { setTimeout(hideSuggest, 100); })
}
var hideSuggest = function () {
suggestWrap.hide();
}
//发送请求，根据关键字到后台查询
var sendKeyWord = function (event) {
//键盘选择下拉项
if (suggestWrap.css(‘display‘) == ‘block‘ && event.keyCode == 38 || event.keyCode == 40) {
var current = suggestWrap.find(‘li.bdsug-s‘);
if (event.keyCode == 38) {
if (current.length > 0) {
var prevLi = current.removeClass(‘bdsug-s‘).prev();
if (prevLi.length > 0) {
prevLi.addClass(‘bdsug-s‘);
input.val(prevLi.html());
}
} else {
var last = suggestWrap.find(‘li:last‘);
last.addClass(‘bdsug-s‘);
input.val(last.html());
}
} else if (event.keyCode == 40) {
if (current.length > 0) {
var nextLi = current.removeClass(‘bdsug-s‘).next();
if (nextLi.length > 0) {
nextLi.addClass(‘bdsug-s‘);
input.val(nextLi.html());
}
} else {
var first = suggestWrap.find(‘li:first‘);
first.addClass(‘bdsug-s‘);
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(‘bdsug-s‘);
$(this).addClass(‘bdsug-s‘);
input.val(this.innerHTML);
}, function () {
$(this).removeClass(‘bdsug-s‘);
})
// .bind(‘hover‘, function () {
// alert(3);
// input.val(this.innerHTML);
// suggestWrap.hide();
// });
}
init();
};
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名
var searchSuggest = new oSearchSuggest(sendKeyWordToBack);
//这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求
//参数为一个字符串，是搜索输入框中当前的内容
function sendKeyWordToBack(keyword) {
/**/var obj = {
"keyword": keyword
};
$.ajax({
type: "POST",
url: "/Navi/NaviPrompt.aspx?NaviKey=" + obj.keyword + "",
// url: "Default4.aspx",
async: false,
// data: obj,
dataType: "json",
error: function (x, y, z) { alert(y) },
success: function (data) {
var aData = http://www.mamicode.com/[];
$(data).each(function () {
aData.push(this.Title);
})
//将返回的数据传递给实现搜索输入框的输入提示js类
searchSuggest.dataDisplay(aData);
}
});
// //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回
// var aData = http://www.mamicode.com/[];
// aData.push(keyword + ‘返回数据1‘);
// aData.push(keyword + ‘返回数据2‘);
// aData.push(keyword + ‘不是有的人天生吃素的‘);
// aData.push(keyword + ‘不是有的人天生吃素的‘);
// aData.push(keyword + ‘2012是真的‘);
// aData.push(keyword + ‘2012是假的‘);
// alert(9);
// //将返回的数据传递给实现搜索输入框的输入提示js类
// searchSuggest.dataDisplay(aData);
}
复制代码中转页面代码：protected void Page_Load(object sender, EventArgs e)
{
if (null != Request.QueryString["NaviKey"] && "" != Request.QueryString["NaviKey"])
{
Prompt(Request.QueryString["NaviKey"]);
}
}
/// <summary>
/// 搜索提示
/// </summary>
protected void Prompt(string key)
{
NV_NaviContentBLL ncbll = new NV_NaviContentBLL();
DataSet ds = ncbll.GetPrompt(string.Format("Title like ‘%{0}%‘ order by RewardAmount desc", key));
if (ds.Tables[0].Rows.Count > 0)
{
Response.Write(ncbll.ToJson(ds.Tables[0]));
Response.End();
}
}
仿百度的输入提示功能