热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQueryAutocomplete自动完成插件

jQueryAutocompleteplugin写的比较满意,拿出来分享,欢迎大家找BUG。
相对于同类插件,他的特色有3点。
1、可缓存查询结果 (二次查询速度快)
2、非keyup监听方式 (解决某些系统/情况下无法触发keyxxx事件的问题)
3、简洁的参数 (好看?)

插件性能尚好,我的E6500、2G内存,30秒内一共发生了4469次调用,耗时94.65毫秒;百度的是2432次调用,80.24毫秒。

接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教。

调用方法

代码如下:

jQuery("#kw").suggest({
url:siteConfig.suggestionUrl,
params:{
kw:function(){return jQuery("#kw").val()},
n:10
}
});

参数url:baseUrl,例如http://www.target.com/search.php
参数params:url的后缀列表,范例中拼合的url为:http://www.target.com/search.php?kw=xxx&n=10&callback=?(默认加入callback)
参数delay:输入间隔时间,主要是为了降低负载,数值越大,负载越低,查询速度越慢。
参数cache:是否实用缓存,默认为true,例如当搜索“test”时,程序会将对应的查询结果缓存,当第二次搜索test时直接从缓存中读取。
参数formId:必须填写,form表单的id
参数callback:是否使用jsonp以便处理跨域问题。
核心代码:
suggest.js
代码如下:

(function($){
$.tools = $.tools || {version: '1.0'};
$.tools.suggest = {};
$.tools.suggest.defaults = {
url : null,
params : null,
delay : 100,
cache : true,
formId : '#search_form',
focus:null,
callback : true
}
$.tools.suggest.borderKey = {
UP: 38,
DOWN: 40,
TAB: 9,
ESC: 27,
ENTER:13
}

$.fn.suggest=function(options,fn){
var options,key = $.tools.suggest.borderKey;
if($.isFunction(options)){
fn=options;
optiOns= $.extend({}, $.tools.suggest.defaults, key);
}else{
optiOns= $.extend({}, $.tools.suggest.defaults, key, options);
}
return this.each(function(){
var
self = $(this),
url = options.url,
params = options.params,
searchUrl = null,
searchtimer = 0,
delay = options.delay,
cache = options.cache,
callback = options.callback,
formobj = $(options.formId),
focus = options.focus,
rebox = $('
    ').attr("id","suggest"),
    htmlLi = null,
    litop = null,
    lileft = null,
    liwth = null,
    tip = false,
    val = null,
    rlen = null,
    UP = options.UP,
    DOWN = options.DOWN,
    TAB = options.TAB,
    ESC = options.ESC,
    ENTER = options.ENTER,
    index = -1,
    choseKey = null,
    backval = null,
    hidden = false,
    locksuggest = false


    //init
    if(focus){
    self.focus();
    searchtimer = setInterval(getKey, delay);
    }
    self.bind("focus",function(){
    searchtimer = setInterval(getKey, delay);
    // 触发焦点时初始化backval的值
    backval = (backval=$.trim(self.val()))==''?null:backval;
    })
    .bind("blur",function(){
    clearInterval(searchtimer);
    searchtimer = 0;
    hideResult();
    })
    .bind("keydown",function(e){
    // 少于10项不使用switch
    if(e.keyCode == UP){
    clearInterval(searchtimer);
    searchtimer = 0;
    if($('#suggest').css('display') == 'none'){
    reSet();
    return false;
    }
    index--;
    if(index<0){
    index=Math.abs(rlen)-1;
    }
    changeSelect(index);
    e.preventDefault();
    return false;
    }else if(e.keyCode == DOWN){
    clearInterval(searchtimer);
    searchtimer = 0;
    if($('#suggest').css('display') == 'none'){
    reSet();
    return false;
    }
    index++;
    if(index>=rlen){
    index=0;
    }
    changeSelect(index);
    e.preventDefault();
    return false;
    }else if(e.keyCode == TAB){
    clearInterval(searchtimer);
    searchtimer = 0;
    hideResult();
    }else if(e.keyCode == ESC){
    clearInterval(searchtimer);
    searchtimer = 0;
    hideResult();
    return false;
    }else if(e.keyCode == ENTER){
    clearInterval(searchtimer);
    searchtimer = 0;
    }else if(searchtimer == 0){
    searchtimer = setInterval(getKey, delay);
    }
    });

    // 获取关键词
    function getKey(){
    val = $.trim(self.val());
    // 关键词不为空且关键词不重复
    if(!!val && val!=backval){
    backval = val;
    // 如不需要缓存结果,设cache为false
    if(cache && !!$.tools.suggest[val]){
    index = -1;
    rlen = $.tools.suggest[val][1];
    appendSuggest($.tools.suggest[val][0]);
    }else{
    searchurl = url+'?'+$.param(params);
    getResult(searchurl,function(htmltemp,htmllen){
    index = -1;
    rlen = htmllen;
    appendSuggest(htmltemp);
    });
    }
    }
    // 关键词为空
    if(!!!val && !hidden){
    hideResult();
    }
    }

    // 获取提示数据
    function getResult(searchurl,fn){
    if(callback){searchurl = searchurl+'&callback=?';}
    $.getJSON(searchurl,function(data){
    var htmltemp = '',
    htmllen = 0,
    inputWord = self.val()

    $.each(data.list,function(i,n){
    if(n.word != inputWord){
    htmltemp += '
  • '+n.word+'
  • ';
    htmllen++;
    }
    });
    if(cache && !!!$.tools.suggest[val]){$.tools.suggest[val]=[htmltemp,htmllen];}
    fn.call(document,htmltemp,htmllen)
    });
    }

    // 插入提示数据
    function appendSuggest(result){
    locksuggest = hidden = false;
    if(!!result){
    if(!tip){
    litop = self.offset().top+self.outerHeight()-1;
    lileft = self.offset().left;
    liwth = self.outerWidth()-2;
    rebox.css({'position':'absolute','top':litop,'left':lileft,'width':liwth}).html(result).appendTo('body').show();
    tip = true;
    }else{
    rebox.html(result).show();
    }
    rebox.find('li').bind('mouseover',function(){
    // 锁定提示层,保证不因冒泡关闭提示层
    locksuggest = true;
    index = $(this).index();
    changeSelect(index,false);
    })
    .bind('click',function(){
    changeSelect(index);
    searchSubmit();
    });
    rebox.bind('mouseout',function(){
    locksuggest = false;
    })
    }else{
    // 如果检索结果为空,清空提示层
    rebox.hide();
    }
    }

    function changeSelect(index,v){
    v=v==false?false:true;
    var obj = rebox.find('li').eq(index);
    rebox.find('li.mo').removeClass('mo');
    obj.addClass("mo");
    if(v){
    choseKey = backval = obj.html();
    self.val(choseKey);
    }
    }

    function reSet(){
    if(!!self.val()){
    index = -1;
    $('#suggest').css('display','block');
    rebox.find('li.mo').removeClass('mo');
    // 根据html结构重新计算提示结果长度
    rlen = rebox.find('li').size();
    }
    }

    function hideResult(){
    if(!locksuggest){
    choseKey = backval = null;
    hidden = true;
    rebox.hide();
    }
    }

    function searchSubmit(){
    self.val(choseKey);
    hideResult();
    clearInterval(searchtimer);
    formobj.submit();
    }

    });
    }
    })(jQuery);

代码打包下载
推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了OkHttp3的基本使用和特性,包括支持HTTP/2、连接池、GZIP压缩、缓存等功能。同时还提到了OkHttp3的适用平台和源码阅读计划。文章还介绍了OkHttp3的请求/响应API的设计和使用方式,包括阻塞式的同步请求和带回调的异步请求。 ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • express工程中的json调用方法
    本文介绍了在express工程中如何调用json数据,包括建立app.js文件、创建数据接口以及获取全部数据和typeid为1的数据的方法。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
author-avatar
平凡屋之换
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有