欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

使用升级版的 Bootstrap typeahead v1.2.2

程序员文章站 2022-05-26 22:14:34
...

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

    使用升级版的 Bootstrap typeahead v1.2.2

    $(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);
            }
        });
    });

    使用升级版的 Bootstrap typeahead v1.2.2

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

    使用升级版的 Bootstrap typeahead v1.2.2

     $(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());
    
                }
            });
        });

    使用升级版的 Bootstrap typeahead v1.2.2