使用升级版的Bootstraptypeaheadv1.2.2

上次介绍了 Bootstrap 2 中附带的 typeahead，功能强大，但是使用起来不太方便，作者 Terry Rosen 已经升级了一个新版本 v1.2.2，作出了很大的改进。 下载地址 https://github.com/tcrosen/twitter-bootstrap-typeahead 使用环境 Twitter Bootstrap 2.0 jQue

上次介绍了 Bootstrap 2 中附带的 typeahead，功能强大，但是使用起来不太方便，作者 Terry Rosen 已经升级了一个新版本 v1.2.2，作出了很大的改进。

下载地址

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  >  

脚本

$(myElement).typeahead(options); 

事件 事件 说明 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 排序结果.

初始化参数 名称 类型 默认值 说明 ajax object

{
    url: null,
    timeout: 300,
    method: 'post',
    triggerLength: 3,
    loadingClass: null,
    displayField: null,
    preDispatch: null,
    preProcess: null
} 

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' The object property to match the query against and highlight in the results. item string ' ' The HTML rendering for a result item. items integer 8 The maximum number of items to show in the results. menu string ' ' The HTML rendering for the results list. source object [] The source to search against. val string 'id' The object property that is returned when an item is selected.

基本使用

如果使用本地数据的话直接使用 source

 var  mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob' }];

$( '#myElement' ).typeahead({
    source: mySource
});  

如果使用 Ajax 的话，可以直接指定 url，注意，现在的版本要求必须使用对象形式的数据源，默认显示文本为对象的 name 属性，可以通过初始化参数的 display 配置，默认的标识属性为 id ，可以使用 val 进行配置。

$('#myElement' ).typeahead({
    ajax:  '/path/to/mySource' 
});  

使用 Ajax

$( function   () {
    $( '#product_search' ).typeahead({
        ajax: {
            url:  '@Url.Action("AjaxService")' ,
            timeout:  300,                    //   延时 
            method: 'post' ,
            triggerLength:  3,                //   输入几个字符之后，开始请求 
            loadingClass:  null ,              //  加载数据时, 元素使用的样式类 
            preDispatch:   null  ,　　　　　　　　// 发出请求之前，调用的预处理方法
            preProcess:   null　　　　　　　　　// Ajax 请求完成之后，调用的后处理方法  
        },
        display:  "name",      //   默认的对象属性名称为 name 属性 
        val: "id",            //   默认的标识属性名称为 id 属性 
        items: 8,             //   最多显示项目数量 
        itemSelected:  function  (item, val, text) {       //   当选中一个项目的时候，回调函数 
             console.info(item);
        }
    });
});  

如果我们需要在请求中，除了递进搜索的参数之外，添加额外的请求参数怎么办呢，可以通过 preDispatch 进行额外处理，需要注意的是，一定要返回一个对象，这个对象将用来使用 jQuery 的 Ajax 方法作为参数。

 $( function   () {
        $( '#product_search' ).typeahead({
            ajax: {
                url:  '@Url.Action("AjaxService")' ,
                timeout:  300,                    //   延时 
                method: 'post' ,
                triggerLength:  3,                //   输入几个字符之后，开始请求 
                loadingClass:  null ,              //
                 preDispatch:  function   (query) {
                      var  para = { other: 'xxxxxxxxx'  };
                    para.query  =  query;
                      return   para;
                },

                preProcess:   function   (result) {
                      return   result;
                }
            },
            display:  "name",      //   默认的对象属性名称为 name 属性 
            val: "id",            //   默认的标识属性名称为 id 属性 
            items: 8,             //   最多显示项目数量 
            itemSelected:  function  (item, val, text) {       //   当选中一个项目的时候，回调函数 
                 console.info(item);
                  //   console.info($("#product_search").val()); 
 
            }
        });
    });  

查看更多关于使用升级版的Bootstraptypeaheadv1.2.2的详细内容...