bootstrap-typeahead ajax的使用


化石原创文章,转载请注明来源并保留原文链接


bootstrap-typeahead是个javascript库,作用是在输入的时候,弹出提示框,帮助快速完成用户需要的输入。最常用的场合是:在用户输入的时候,前端通过ajax访问服务器,服务器从用户当前输入的字符,从数据库中寻找到含有该字符的合适字符串数组,然后返回给前端的typeahead运行库,typeahead负责显示列表框,辅助用户输入。

在使用ajax获取合适的数据的过程中,现在typeahead需要结合另外一个javascript库:bloodhound.js。

实际准备工作:

1、github上得到bootstrap-typeahead.min.js

地址:https://github.com/iqbalfn/bootstrap-typeahead/tree/master/dist/js

2、通过npm得到bloodbound.min.js

命令:npm install bloodhound-js –save

通过上面的命令,可以在当前目录下载到bloodhound.js的工程,对应的min.js在node_modules目录的bloodhound-js目录的dist目录下

实际代码工作:

1、在需要的html中引入bloodhound.min.js和bootstrap-typeahead.min.js (JQuery库一般都是常用的,这里默认大家都先引入)

譬如:

<script src="plugin/bloodhound.min.js"></script>
<script src="plugin/bootstrap-typeahead.min.js"></script>

2、自己的javascript中,在某个初始化的地方,初始化typeahead的绑定工作:(a)绑定typeahead和bloodhound实例;(b)绑定typeahead和html中的某个输入元素

举例:

$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
    var authors = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            wildcard: '%QUERY',
            url: 'http://127.0.0.1:8080/api/getjson',
            transform: function(response) {
                // Map the remote source JSON array to a JavaScript object array
                return $.map(response.data, function(data) {
                    return {
                        name: data
                    };
                });
            }
        }
    });
,
    // Instantiate the Typeahead UI
    $('#author-search').typeahead(null, {
        display: 'name',
        source: authors,
        limit: 1000, //如果这个不填,默认是搜索到的结果,也就是上面的transform.$.map返回结果的-1个
    });
});

上面例子中的第1行,说明了我们是在document准备好就开始做这个工作,这个也是常见的用法。

第23行,我们绑定了typeahead和html中一个id为author-search的input元素。这里同时也初始化了typeahead实例:(1)display的name和第15的name是一起运作的;(2)source指定了数据源从第3行的变量(方法)得到;(3)limit这个是个配置的值,如果不指定的话,那么如果ajax返回n个值,在typeahead中显示出来的,必定是n-1个。会看起来少一个值,这里注意。

第8行,说明了我们这个的数据从远程服务器得到,而不是本地。这里通过第10行配置一个可以访问的url,bloodhound会使用ajax(xmlHttpRequest)等手段访问该url(Get方式),该url必须返回json格式的数据。

第9行,wildcard是一个占位符,实际的作用是在url指定中,我们可以指定参数,比如“http://127.0.0.1:8080/api/getjson?id=%QUERY”,这里的%QUERY就是每次ajax访问(这个访问有typeahead根据内部策略发起)的时候,用户在input元素中已经输入的字符串。有这个字符串,我们的后台程序就知道用户现在输入了什么,就可以在给前端返回数据前根据这些输入的字符串做一次过滤。

第11行,transform方法回调是bloodhound用来在远程数据得到后做处理的地方。关键是参数response,这个参数如果放断点看到是null的时候,你就知道你的url返回的不是json格式。

如果正确的话,那么response就是远程返回的json数据。检查远程返回的数据是否json的话,最简单的就是使用Postman这个工具给对应的url发个Get请求,如果返回的数据在Postman中清晰的看到是json,那么如果第13行如果有断点,就能被击中。

第13行,在typeahead应用场景中,一般远程返回的json数据中,必定有一个栏位是数组形式(因为肯定是多个选择才会出列表)。这里是通过第一个参数定位response中哪个是列表,然后列表中的每个元素,哪个值是我们最后的typeahead需要的(第二个参数是每个列表的元素的句柄)。

以13和15行为里,这里我们返回的response json数据中,应该有这样的形式:

{“data”:[“string1”, “string2”]}

参数response.data就是[]的句柄,参数data第一次是string1、第二次是string2。

要就是bloodhound会循环数组中的每个元素(根据15行的规则,这里我们只是把string1、string2拷贝给每个name),得到最后喂给typeahead的数组。

这里要说的是,response的json格式,因为bloodhound的transform,完全就可以是任意格式。比如,我们上面的response,可以是

{“result”: 200, “description”: “OK”, “data”:[“string1”, “string2”]}

如果data数组里面的并不是单一的string,也是对象,比如

{“data”:[ {“name”:”joe”}, {“name”:”kylin”}]}

那么我们上面的transform代码就要改成:

transform: function(response) {
                return $.map(response.data, function(data) {
                    return {
                        name: data.name
                    };
                });
            }

因为这个时候,参数2其实都是json的一个对象格式。

第15行的name,这个名字完全是由24的display后面的字符决定的,如果24行改成了display: ‘value’,那么这里的name就需要变成value。


化石原创文章,转载请注明来源并保留原文链接


发表评论

电子邮件地址不会被公开。 必填项已用*标注