jquery监听下拉框选中事件_让input框实现类似百度的搜索提示(基于jquery事件监听)...

让input框实现类似百度的搜索提示，oninput和onpropertychange事件监听，通过ajax获取json数据

挺炫的一个效果，百度和谷歌好像已实现好多年了，我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求，发现还真找不到。于是自己动手写这个效果，由于我是把效果整合到我的整套框架里，所以没有进行单独的封装。

需求：

实现带提示的input框，类似百度搜索，有改动的时候去获取常用关键词，数据来源于系统数据库，支持鼠标选择或键盘选择

思路：

框架一贯思路，通过class作为监听入口，通过data作为数据传递；

通过监听input和propertychange事件实现实时的改动监听，input是主流，propertychange是ie，你懂的；

通过ajax实现post动作，把返回内容显示成类似选框的形式；

监听键盘的上键(38)、下键(40)、回车键(13)，通过绑定keydown，判断event.keycode实现；

监听鼠标的mouseover和click事件，与键盘动作要完美结合；

若input内容要求与已知选项必须一致，则监听blur事件，判断是否允许换焦点；

实现代码：

//By COoL

//定义全局变量用于储存提示层

var liketips;

//监听改动或得到焦点事件

//禁用chrome和firefox浏览器自带的自动提示

$('.getsearchjson').attr("autocomplete","off");

$('.getsearchjson').bind("propertychange input focus",function(event){

$this=$(this);

if(event.type!='focus'){

//如果有改变，则状态定为必须重新选择，因为纯人手输入会导致value无法插入

$this.data('ok',false);

}

//获取input框位置并计算提示层应出现的位置