谷歌asp连接mysql_ASP实现类似谷歌的输入提示

我曾经自己试着写过 仿google输入框输入提示功能，效果还算勉强可以，和你分享一下经验。

准备条件：

一个输入框 input --- 这里称做 input_,

输入框下方一个有边框的 div--- 这里称做 div_frame,

div 里面有的多个 div了先项--- 这里称做 div_li。

效果：

键盘弹起时，显示div_frame,并且把 input_的值为开头的所有数做为子选项显示在 div_frame中。

步骤：(使用 jQuery 是必须的)

1.获取数据源。(页面加载一次，仅查询一次数据库，把查得数据存入内存，以供后面调用)

我这里是加载页面的时候用 ajax 获取数据，用变量 var list = getList(); 存储。 function getList(){$.ajax(...)}

2.为 input_绑定计时器事件。

当 input_获得焦点后，每0.5秒调用一次 function compare(event) /* inupt_的 value和 list进行比较，返回以 input_的值开头的数据 */，当失去焦点后删除这个计时器事件。

//键盘弹起事件绑定

var timeoutId;//全局变量

$("#input_").keyup(function(event){

clearTimeout(timeoutId);//删除计时器事件

timeoutId = setTimeout(function(){

compare(event);

},500);

});

$("#input_").focus(function(){clearTimeout(timeoutId);});

3.根据 function compare(event)返回的数据对 div_frame 中的 div_li 进行排版，调用function itemView(items){}

呃 最主要的思路差不多说完了，剩下的就再简略一点说了。

4.当 input_获得焦点，input_的值为空时，div_frame 显示list的所有数据。

5.加载页面的时候，给body一个单击事件，用于隐藏 div_frame。

6.鼠标移入div_frame 后，去除body 单击事件 $("body").unbind({"click": hideViewMod});

var hideViewMod = function(){

$("#div_frame").hide();

}

7.鼠标移出div_frame 后，再次添加这个单击事件

使用jQuery的 hover()

8.给 div_li 绑定单击事件

9.在 div_frame 外单击后，div_frame被隐藏，要去除 body单击事件