Young87

虽然在.net中有ajaxControlToolKit的combobox。但是那个combobox实在是不给力。在网上找了很久，还是没有找到合适的combobox.于是自己封装了一个。

主要实现的功能有。

1.点击标签，显示所有数据源

2.在text中输入文本，模糊匹配。

3.配置是否必须要选择。

4.添加选中时的事件。

具体描述如下。

combobox原型属性：        原型属性主要的用途为一次设定，所有combobox的实例都可以使用

maxLength       自动搜索时，显示的最大长度，默认为所有，主要是因为搜索出来过多时，影响速率

mustSelect       必须选择，默认为false ,配置该combobox是否必须选择

fieldText           数据源的文本字段，默认为text

fieldValue          数据源的ID字段，默认为id

combobox原型方法

Init()               初始化所有combobox外观，第一个参数为jquery选择器,选择多个可以设定textbox的class,第二个参数为图片地址，

combobox属性

host                         该combox对应text的选择器，如“#demo”

dataSource                数据源

defaultText                combobox默认显示的值

事件

onSelected       当选择一个options时触发，参数为option的 jquery对象，如参数名为jqdom ,那么id应该是jqdom.attr(‘id’)

                       text应该为jqdom.text();

dataBind()       绑定combobox的数据源。

 

简单调用

 

   <!
   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   >
   

   <
   html 
   xmlns
   ="http://www.w3.org/1999/xhtml"
    
   >
   

   <
   head
   >
   

   <
   title
   ></
   title
   >
   

   <
   link 
   rel
   ="Stylesheet"
    href
   ="combobox/jquery.combobox.css"
    
   />
   

   <
   script 
   type
   ="text/javascript"
    src
   ="combobox/jquery-1.3.2-vsdoc2.js"
   ></
   script
   >
   

   <
   script 
   type
   ="text/javascript"
    src
   ="combobox/jquery.combobox.js"
   ></
   script
   >
   

   <
   script 
   type
   ="text/javascript"
   >
   
 $(
   function
   () {

   //
   设置该页面上所有combobox的模式
   

    
   //
   combobox.prototype.mustSelect = false; //必须选择参数,默认为false
   

    
   //
   combobox.prototype.fieldText = "text"; //设置数据源文本命名，默认为text
   

    
   //
   combobox.prototype.fieldValue = "id"; //设置数据源id命名，默认为id
   

    
   //
    combobox.prototype.maxLength = 3; //自动搜索显示20项,默认为null.即不限制
   

    
   //
   初始化所有combobox
   

    
   //
   如果有多个text要改成combobox.请在text上设置class。然后id参数使用‘.class',如 combobox.prototype.init(".demos"）
   

    combobox.prototype.init(
   "
   #demo
   "
   , 
   "
   combobox/dropdown.gif
   "
   );


   //
   绑定
   

    
   var
    combo 
   =
    
   new
    combobox(
   "
   #demo
   "
   );
 combo.dataSource 
   =
    [{ id: 
   '
   i1
   '
   , text: 
   '
   t1
   '
    }, { id: 
   '
   i2
   '
   , text: 
   '
   t2
   '
    }, { id: 
   '
   i3
   '
   , text: 
   '
   t3
   '
    }, { id: 
   '
   i4
   '
   , text: 
   '
   t4
   '
    }, { id: 
   '
   i5
   '
   , text: 
   '
   t5
   '
   }];

   //
   combo.defaultText = "xx";//text的默认值，默认为text的value;
   

    combo.dataBind();
 });

   </
   script
   >
   

   </
   head
   >
   

   <
   body
   >
   

   <
   input 
   type
   ="text"
    id
   ="demo"
    value
   ="ab"
    
   />
   

   </
   body
   >
   

   </
   html
   >
  

样式不是很好，懂得css的人调下，目前在ff,ie8中没有问题。

demo下载