使用升级版的 Bootstrap typeahead v1.2.2-mysql教程-PHP中文网

使用升级版的 Bootstrap typeahead v1.2.2

php中文网

发布： 2016-06-07 15:39:15

原创

1129人浏览过

上次介绍了 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+

页面准备

<span><</span><span>link </span><span>href</span><span>="/path/to/bootstrap.css"</span><span> rel</span><span>="stylesheet"</span><span>></span>
<span><</span><span>script </span><span>src</span><span>="/path/to/jquery.js"</span><span> type</span><span>="text/javascript"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>script </span><span>src</span><span>="/path/to/bootstrap-typeahead.js"</span><span> type</span><span>="text/javascript"</span><span>></</span><span>script</span><span>></span>

登录后复制

脚本

$(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	@@######@@	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

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

登录后复制

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

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

$(</span>'#myElement'<span>).typeahead({
    source: mySource
});</span>

登录后复制

使用 Ajax

使用升级版的 Bootstrap typeahead v1.2.2

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

登录后复制

使用升级版的 Bootstrap typeahead v1.2.2

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

使用升级版的 Bootstrap typeahead v1.2.2

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

登录后复制

使用升级版的 Bootstrap typeahead v1.2.2

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

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

登录后复制