Bootstrap Typeahead：如何在 typeahead 绑定函数中获取所有获取的远程值答案

【问题标题】：Bootstrap Typeahead : How to get all fetched remote values in typeahead bind functionBootstrap Typeahead：如何在 typeahead 绑定函数中获取所有获取的远程值
【发布时间】：2017-07-25 11:09:51
【问题描述】：

是否可以在 typeahead 绑定函数中获取所有获取的远程值？

var bankNames = new Bloodhound({
         datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
         },
         queryTokenizer: Bloodhound.tokenizers.whitespace,
         limit: 10,
         remote: {
            url: '/payments/bankwithdrawal/bankdetails?str=%QUERY,
            prepare: function (query, settings) {
               var encoded = query.toUnicode();
               settings.url = settings.url.replace('%QUERY', encoded);
               return settings;
            }
         }
      });

      bankNames.initialize();

      // Initializing the typeahead
      $('.typeahead').typeahead({
                 hint: true,
                 highlight: true, // Enable substring highlighting
                 minLength: 1 // Specify minimum characters required for showing result
              },
              {
                 name: 'bankname',
                 source: bankNames
              }).bind('change blur', function () {

                console.log(bankNames);

                console.log(bankNames.index.datums);

    });

它应该给我bankNames.index.datums 中的所有银行名称，但它给了我

Object {}
__proto__: Object
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toString: function toString()
valueOf: function valueOf()
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
get __proto__: function __proto__()
set __proto__: function __proto__()

我需要绑定函数中的所有银行名称，我需要执行一些操作。

当我在绑定函数console.log(bankNames) 中打印时，它应该返回所有获取的远程值。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-typeahead twitter-typeahead

【解决方案1】：

我在transform 的帮助下得到了解决方案，它是Bloodhound 的一部分。配置远程选项时，transform 选项可用。

transform – 具有签名 transform(response) 的函数允许您在 Bloodhound 之前转换远程响应实例对其进行操作。

您可以在此链接中阅读有关 Bloodhound 选项的更多信息 https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote

var bankNameList;
var bankNames = new Bloodhound({
         datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
         },
         queryTokenizer: Bloodhound.tokenizers.whitespace,
         limit: 10,
         remote: {
            url: '/payments/bankwithdrawal/bankdetails?str=%QUERY,
            prepare: function (query, settings) {
               var encoded = query.toUnicode();
               settings.url = settings.url.replace('%QUERY', encoded);
               return settings;
            },
            transform : function (data) {
               bankNameList = data;
               return data;
            }
         }
      });

      bankNames.initialize();

      // Initializing the typeahead
      $('.typeahead').typeahead({
                 hint: true,
                 highlight: true, // Enable substring highlighting
                 minLength: 1 // Specify minimum characters required for showing result
              },
              {
                 name: 'bankname',
                 source: bankNames
              }).bind('change blur', function () {

                console.log(bankNameList);

      });

现在如果你在bind 的提前输入函数console.log(bankNameList); 中打印bankNameList，它将打印从远程获取的数据。

【讨论】：