554  
查询码: 00000441
Jquery实现仿搜索引擎文本框自动补全插件|jqueryschool
作者: 系统管理员 于 2017年06月14日 发布在分类 / 技术研发 / 编程脚本 ,于 2017年10月22日 编辑
jquery 特效 插件 分享 中国 网友 文本 自动 搜索 实现


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);
        }
    });
})
效果如下:
0人参与


 历史版本

备注 修改日期 修改人
CREAT 2017-10-22 12:20:36[当前版本] 系统管理员

wcp知识库系统-京ICP备15024440号-1 -V 5.1.9 -wcp