Heim > Web-Frontend > js-Tutorial > Hauptteil

基于jQuery的自动完成插件_jquery

WBOY
Freigeben: 2016-05-16 18:11:04
Original
1146 Leute haben es durchsucht

下面是html测试代码:

复制代码 代码如下:




autoComplete













下面是jQuery插件:
复制代码 代码如下:

;(function($){
/* Plugin */
$.fn.autoComplete=function(o){
if(o.ajax) o.ajax=$.extend({ url:'', dataType:'json', async:true }, o.ajax||{});
o.elemCSS=$.extend({ focus:{'color':'#f00'}, blur:{'color':'#000'} }, o.elemCSS||{});
o=$.extend({
source:null,/* privide an array for match */
ajax:{},/* provide an ajax conditions, if source is exist this parameter is invalid */
input:'input',/* provide the selector of input box */
popup:'ul',/* provide the selector of popup box, it must be a ul element of html */
elemCSS:{}/* provide the focus and blur css objects of items in the popup box */
},o||{});
var handler=(function(){
var handler=function(e,o){ return new handler.prototype.init(e,o); };
handler.prototype={
e:null, o:null, timer:null, show:0, $input:null, $popup:null,
init:function(e,o){
this.e=e;
this.o=o;
this.$input=$(this.o.input,this.e);
this.$popup=$(this.o.popup,this.e);
this.initEvent();
},
match:function(quickExpr,value,source){
for(var i in source){
if( value.length>0 && quickExpr.exec(source[i])!=null )
this.$popup.append('
  • '+source[i]+'
  • ');
    }
    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(currentif(current>len) current=0;
    that.$popup.find("li a").get(current).focus();
    }else if(event.keyCode==38){
    current--;
    if(current>len) current=0;
    if(currentthat.$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读数据库来测试的,如果需要,代码如下:
    复制代码 代码如下:

    class DataFetch{
    private $conn, $rs;
    function __construct(){
    $this->conn = mysql_connect("localhost","root","pwd") or die("Cant't connect host~");
    mysql_select_db("studentinfo",$this->conn) or die("Cant't select database~");
    }
    public function data_list($s){
    $this->rs=mysql_query("select sno from student where sno like '$s%'") or die("Can't fetch~");
    $dataList=array();
    while($row = mysql_fetch_array($this->rs,MYSQL_ASSOC)){
    array_push($dataList,$row);
    }
    return $dataList;
    }
    }
    $search= isset($argv[1]) ? $argv[1] :
    ( isset($_GET['search']) ? $_GET['search'] : '' ) ;
    $fetch=new DataFetch();
    $data=$fetch->data_list($search);
    echo '[';
    foreach ($data as $key=>$value){
    echo "\n\t";
    echo '"'.$value['sno'].'"';
    if( $key!=count($data)-1 ) echo ','; else echo "\n";
    }
    echo "]\n";
    ?>
    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage