Jquery实现仿搜索引擎文本框
自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置 //width:下拉框的宽度,默认使用输入框宽度、用来ajax后台获取数据,返回的数据格式为data参数一样、数据格式{data:[{title:null,result:{}},{title:null,result:{}}]}url和data参数只有一个生效,data优先、选中行后按回车或单击时回调的函数
包含以下功能特效:
1、弹出层特效
2、输入框keydown事件
3、输入框keyup事件
4、ESC键隐藏下拉框
5、输入框focus事件
初始化功能代码如下:
$(function() {
$("#tt").bigAutocomplete({
width: 604,
data: [{
title: "中国好声音",
result: {
ff: "qq"
}
},
{
title: "中国移动网上营业厅"
},
{
title: "中国银行"
},
{
title: "中国移动"
},
{
title: "中国好声音第三期"
},
{
title: "中国好声音 第一期"
},
{
title: "中国电信网上营业厅"
},
{
title: "中国工商银行"
},
{
title: "中国好声音第二期"
},
{
title: "中国地图"
}],
callback: function(data) {
alert(data.title);
}
});
})
效果如下: