bootstrap-typeahead的ajax调用

    我本人写过很多的自动匹配脚本，但是一牵扯到ajax后台调用，总是感觉相当麻烦，这段时间有一个小项目又要用到类似的组件，我痛下决心搞一个好的经过 一下午的比较和使用发现了一个相当不错件那就是 twitter-bootstrap-typeahead-master

   这个组件和 bootstrap-typeahead 原装的不太一样，因为原装的对ajax竟然没有支持，如果写的话很费劲，而 twitter-bootstrap-typeahead-master 这个项目则在原版的基础上增加了ajax的功能，着实解决了很多问题，不过这个组件也有不好的地方，就是没有类似于 Jquery插件autocomplete的mustMatch 属性 （如果设置true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框），所以经过改造后也实现了这个功能，现在我研究的一些心得与大家分享一下。

     首先下载 twitter-bootstrap-typeahead-master 这个组件。

     下载地址:

             http://download.youkuaiyun.com/detail/ltllml44/9634157

            https://github.com/tcrosen/twitter-bootstrap-typeahead

开发前需要版本

• Twitter Bootstrap 2.0+
• jQuery 1.7+

解压后只需要引用如下包即可

   

    

     <link href="/path/to/bootstrap.css" rel="stylesheet">
    
    

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

     <script src="/path/to/bootstrap-typeahead.js" type="text/javascript"></script>
    
   

官方的API：

Events

Event	Description
grepper	Filters relevant results from the source.
highlighter	Highlights any matching results in the list.
itemSelected	当选中一个项目时的回调函数. item: 选中的 HTML 元素 val: *val* 属性的值 text: *display* 属性的值
lookup	Determines if source is remote or local and initializes the search.
matcher	Looks for a match between the query and a source item.
render	Renders the list of results.
select	Selects an item from the results list.
sorter	Sorts the results.

Options

Name	Type	Default	Description
ajax	object	{ url: null,（1） timeout: 300,（2） method: 'post',（3） triggerLength: 3,（4） loadingClass: null, displayField: null, preDispatch: null,（5） preProcess: null（6） }	The object required to use a remote datasource.  See also: ajax as a string (below)
ajax	string	null	Optionally, a simple URL may be used instead of the AJAX object.  See also: ajax as an object (above)
display	string	'name'  （7）	The object property to match the query against and highlight in the results.
item	string	'<li><a href="#"></a></li>'	The HTML rendering for a result item.
items	integer	8   （9）	The maximum number of items to show in the results.
menu	string	'<ul class="typeahead dropdown-menu"></ul>'	The HTML rendering for the results list.
source	object	[]	The source to search against.
val	string	'id' （8）	The object property that is returned when an item is selected.

API重点说明

（1） url:顾名思义，需要传一个后台的路径。

（2） timeout: 延时加载 

（3） method:提交方式

（4）tiggerLength:输入几个汉字后开始请求后台。

（5）preDispatch:  发出请求前调用的预处理方法

（6）preProcess:发出请求后的调用方式

（7）display:默认的对象属性名称

（8）val：默认的标识属性名称

（9）tiems：下拉列表最多显示几个

前台开发，官方提供的例子比较简单。

    

 $('#demo3').typeahead({
        source: [
            { id: 1, full_name: 'Toronto', first_two_letters: 'To' },
            { id: 2, full_name: 'Montreal', first_two_letters: 'Mo' },
            { id: 3, full_name: 'New York', first_two_letters: 'Ne' },
            { id: 4, full_name: 'Buffalo', first_two_letters: 'Bu' },
            { id: 5, full_name: 'Boston', first_two_letters: 'Bo' },
            { id: 6, full_name: 'Columbus', first_two_letters: 'Co' },
            { id: 7, full_name: 'Dallas', first_two_letters: 'Da' },
            { id: 8, full_name: 'Vancouver', first_two_letters: 'Va' },
            { id: 9, full_name: 'Seattle', first_two_letters: 'Se' },
            { id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo' }
        ],
        display: 'full_name'
    });

如果不用ajax 其实将数据格式封装成入上代码所示就足够了。

通过阅读源码，我增加并实现了 mustMatch的功能（ 只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框 ）。

核心代码的主要思想是：当文本输入框失去焦点的时候，判断当前输入的值，是不是能与下拉列表中的数匹配，如果不匹配则清空，并且高亮显示。（修改后的源码请在文章结尾处获取）

   

    

     blur: function (e) {
    
    

       	  var val = this.$element.val();
    
    

           this.focused = false
    
    

           if(this.uploadData(val)==""){//增加的代码
    
    

           	this.$element.css("border","solid red 1px")
    
    

           }else{
    
    

           	this.$element.css("border","solid green 1px")
    
    

           }
    
    

           this.$element.val(this.uploadData(val))
    
    

           if (!this.mousedover && this.shown) this.hide()
    
    

         }
    
   

具体使用方法如下：

   

    

       	
    
    

     <script type="text/javascript">
    
    

      
    
    

     var data = [
    
    

     		    { id: "巴厘岛", name: "巴厘岛" },
    
    

     		    { id: "日本", name: "日本" },
    
    

     		    { id: "爱尔兰", name: "爱尔兰" },
    
    

     		    { id: "北欧", name: "北欧" },
    
    

     		    { id: "希腊", name: "希腊" },
    
    

     		    { id: "捷克", name: "捷克" },
    
    

     		    { id: "意大利", name: "意大利" },
    
    

     		    { id: "越南", name: "越南" },
    
    

     		    { id: "迪拜", name: "迪拜" },
    
    

     		    { id: "斯洛伐克", name: "斯洛伐克" },
    
    

     		    { id: "柬埔寨", name: "柬埔寨" },
    
    

     		    { id: "马耳代夫", name: "马耳代夫" },
    
    

     		    { id: "德法瑞意", name: "德法瑞意" },
    
    

     		    { id: "北欧1", name: "北欧1" },
    
    

     			{ id: "北欧2", name: "北欧2" }];
    
    

      
    
    

      
    
    

     $(document).ready(function() {
    
    

     	
    
    

     	    $('#search').typeahead({
    
    

     	       source: data,
    
    

     		   uploadData:function(item){
    
    

     		   	  var arrayData = new Array();
    
    

     		      $.each(data, function (n, value) {//循环比较
    
    

     	                arrayData.push(value.name);
    
    

     	           });
    
    

         	   var index = $.inArray(item,arrayData);
    
    

         	   	if(index==-1){
    
    

        				return ""; //如果不匹配清空
    
    

        			}
    
    

        			return item;  //如果匹配则显示
    
    

     			}  
    
    

     		});
    
    

     	    
    
    

     }); 
    
    

     	 
    
    

     </script>
    
   

ajax方式获取后台数据

  

   

    	    $("#respondentName").typeahead({  
   
   

    	    	   ajax: {  
   
   

    	    	       url: "${ctx}/order/capBusiOrder/listLegalUnit",  
   
   

    	    	       timeout: 100,  
   
   

    	    	       displayField: "horsortName",  
   
   

    	    	       triggerLength: 1,
   
   

    	    	       dataType: 'JSON',
   
   

    	    	       method: "get",  
   
   

    	    	       loadingClass: "loading-circle",  
   
   

    	    	       preDispatch: function (query) {  
   
   

    	    	            return {  
   
   

    	    	            	horsortName: query, //查询条件 
   
   

    	    	                limit: 5, //一次只查询5条
   
   

    	    	            }  
   
   

    	    	        },
   
   

                        preProcess: function(data) { // 这个方法非常重要！  
   
   

                      	// 本插件要求处理一个javascript对象而不是一个json字符串  
   
   

                      	// 同时应当注意 ！  
   
   

                         return $.parseJSON(data); //非常重要 
   
   

                        }  
   
   

     
   
   

    	    	    },
   
   

    	    	    display:'horsortName',
   
   

    	    	    val:'id',
   
   

    	    	    items:5,
   
   

    	    	    itemSelected:function(item, value, text) {
   
   

    	    	    	 //alert(item);//object 对象
   
   

    	    	    	 //alert(text);  //选中的名称s	
   
   

    	    	    }   	 
   
   

    				,
   
   

    	 		   uploadData:function(item){//什么都可以通过。不许要做匹配验证则写成如下这种方案
   
   

    	    			return item;
   
   

    	 			}
   
   

    	    	}); 
   
  

修改的代码下载地址如下：

http://download.youkuaiyun.com/detail/ltllml44/9634236