源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

基于jQuery的自动完成插件

  • 时间:2021-12-27 07:36 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于jQuery的自动完成插件
下面是html测试代码:
[url=javascript:;]} if($('li a',this.$popup[0]).length){ this.$popup.show(); }else{ this.$popup.hide(); } }, fetch:function(ajax,search,quickExpr){ var that=this; $.ajax({ url: ajax.url+search, dataType: ajax.dataType, async: ajax.async, error: function(data,es,et){ alert('error'); }, success: function(data){ that.match(quickExpr,search,data); } }); }, initEvent:function(){ var that=this; this.$input.focus(function(){ var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this; that.timer=setInterval(function(){ if(value!=self.value){ value=self.value; that.$popup.html(''); if(value!=''){ quickExpr=RegExp('^'+value); if(that.o.source) that.match(quickExpr,value,that.o.source); else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr); } } },200); }).blur(function(){ clearInterval(that.timer); var current=-1; var len=that.$popup.find("li a").length-1; $("li a",that.$popup[0]).click(function(){ that.$input[0].value=$(this).text(); that.$popup.html('').hide(); }).focus(function(){ current = $(this).parent().index(); $(this).css(that.o.elemCSS.focus); }).blur(function(){ $(this).css(that.o.elemCSS.blur); }); $("li a",that.$popup[0]).keydown(function(event){ if(event.keyCode==40){ current++; if(current<0) current=len; if(current>len) current=0; that.$popup.find("li a").get(current).focus(); }else if(event.keyCode==38){ current--; if(current>len) current=0; if(current<0) current=len; that.$popup.find("li a").get(current).focus(); } }); }).keydown(function(event){ if(event.keyCode==40){ that.$popup.blur().find("li a").get(0).focus(); } }); $(this.e).hover(function(){ that.show=1; },function(){ that.show=0; }); $(document).click(function(){ if(that.show==0){ that.$popup.hide(); } }); } }; handler.prototype.init.prototype=handler.prototype;/* JQuery style */ return handler; })(); return this.each(function(){ handler(this,o); }); }; /* Invoke */ $(document).ready(function(){ $(".autoComplete").autoComplete({ source:[123,1234,43563,12346,3464564,3454,7567,956,456,9383,893,999], //ajax:{ url:'./php/fetch.php?search=', dataType:'json', async:false }, elemCSS:{ focus:{'color':'#0f0'}, blur:{'color':'#f00'} } }); }); /* Conclude */ })(jQuery);
调用时有个ajax请求被注释了,它返回一个json数据,我用php读数据库来测试的,如果需要,代码如下:
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部