下拉自动提示类的解析

公司使用的下拉自动提示类使用的是  j.suggest.js

 

简单分析下源码:

 

//download by http://www.codefans.net
(function($) {

  $.suggest = function(input, options) {

     options.onSelect.apply(options.cityList[$input[0].value]);  

  }

  $.fn.suggest = function(source, options) {

    this.each(function() {
      new $.suggest(this, options);
    });

    return this;

  };

})(jQuery);

 

其中:

 

(function($) {.......})(jQuery);

 

是对JQUERY内部方法的扩展

 

//对所有的JQUERY实例添加 方法 suggest

  $.fn.suggest = function(source, options) {
    this.each(function() {
      new $.suggest(this, options);
    });

    return this;

  };

 

如此,所有的 $("***")都可以使用 suggest方法.

 

this , 就把jquery对象自身作为参数传递到  方法 suggest(this, options) 中 .

 

options 参数是一个JSON对象, 其中 onSelect 是一个 function 函数, 使用了 .apply 方法来调用这个参数函数.

 

 

suggest(){

       options.onSelect.apply(options.cityList[$input[0].value]);

}

 

onSelect函数如下 :

 

onSelect:fn

 

function(){
      if(query.cityName != this[1]){
        query.cityId = this[6];
        query.isUpCity = true;
      }else{
        query.isUpCity = false;
      }
    }

 

该函数中, 可以使用this来使用传入的参数 :  options.cityList[$input[0].value]  是一个数组对象 .

 

这样的好处是, 可以把函数内部处理的结果直接拿到页面来处理.