Question

我一直在使用typeahead.js并使用BloodHound remote选项加载数据。

当我在only spaces打字textbox中输入sends ajax call时，正在按预期工作。

如果文本框中有prevent ajax call，我想知道only spaces是否有办法。我正在寻找类似trim的行为。

这是我的代码。我曾尝试使用prepare函数，但没有运气。

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ProductID', 'ProductName'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
              url: urlVar + "LoadAllProductByProductName/%QUERY",
              wildcard: '%QUERY',

            },
    sufficient: 3,
   });

const $tagsInput = $('.txtProductName')
$tagsInput.typeahead({
   minLength: 3,
   source: dataSource,
   hint: false,
   highlight: true,
   isBlankString: false
   },
   {
      limit: 10,
      source: dataSource,
      name: 'dataSource',
      display: function (item) {
         return item.ProductName
      },
      suggestion: function (data) {
         return '<div>' + data.ProductName + '–' + data.ProductID + '</div>'
      },

});

Answer 1

我会尝试将keyUp事件附加到文本框以执行过滤：

$tagsInput.keyup(function(){
        this.value = this.value.replace(/  */, ' ');
    });

这将在第二个空格之后触发，除非字段中还有非空格字符，否则应该缓解不良行为。

Answer 2

remote属性有一个prepare函数，您可以在调用电话之前使用此更改的句柄。

举个例子：

function createBloodHoundConfig(options) {
    return {
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        identify: options.identify,
        sufficient: 8,
        remote: {
            url: options.url,
            prepare: function (query, settings) {
                settings.url = settings.url.replace("{q}", query.trim());
                return settings;
            }
        },
    };
}

请注意，在这种情况下，您不提供wildcard属性，因为它实际上是替换令牌的简写。

Answer 3

为什么不试试呢？

prepare: function (query, settings) {
                    var word = $.trim(query);
                    if(word){
                        settings.url = "/search?q=" + 
                       word;
                        return settings;
                    }
                },

防止对空格的aaax调用typeahead.js

3 个答案: