预先输入未显示所有数据(v0.11.1)

时间:2016-04-30 23:17:52

标签: javascript jquery typeahead.js twitter-typeahead bloodhound

我正在使用Typeahead v0.11.1

我有以下脚本以键值对的格式从服务器获取数据,其中键为“id”和“name”。

当我使用特定查询进行搜索时,说“交易”,结果并未显示所有带有交易一词的条目,即使它没有超过默认的5个结果限制。

例如,查询trading会返回结果

  

Xujoq营销贸易私人有限公司

,但未显示以下内容

  

Masterful Energy Trading Pte Ltd

     

Masterful Energy Trading SA

     

Halorey Trading LLC

var search = $("#inputProvider");
var positions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'sql_getentities.php',
    filter: function(datum) {
      var matches = [];
      var substrRegex = new RegExp(escapeRegExp(search.val()), "i");
      $.each(datum, function(i, data) {
        if (substrRegex.test(data.name)) {
          matches.push(data);
        }
      });
      console.log(JSON.stringify(datum));
      return matches;
    }
  }
});
positions.initialize();
search.typeahead({
  highlight: true
}, {
  name: "entities",
  templates: {
    suggestion: function(data) {
      return '<div>' + data.name + '</div>';
    },
    notFound: function() {
      return '<div class="tt-suggestion">Entity not found. Click <a href="/home/">here</a> to add entity.</div>';
    }
  },
  source: positions.ttAdapter(),
  display: function(data) {
    return data.name;
  }
}).bind('typeahead:selected', function(obj, datum, name) {
  $('#hiddenEntityID').val(datum.id);
});

function escapeRegExp(str) {
	return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<input type="text" id="inputProvider">

sql_getentities.php

的json输出
[
{"id":"00000000009","name":"Xujoq Marketing Trading Pte Ltd"},
{"id":"00000000010","name":"Delpo Singapore Pte Ltd"},
{"id":"00000000013","name":"Ingredia Singapore Pte. Ltd."},
{"id":"00000000003","name":"Masterful Energy Trading Pte Ltd"},
{"id":"00000000004","name":"Masterful Energy Trading SA"},
{"id":"00000000011","name":"Yugsol GP Asia Pte Ltd"},
{"id":"00000000012","name":"Yugsol GP GmbH"},
{"id":"00000000008","name":"Jenex Holdings (Asia) Pte Ltd"},
{"id":"00000000005","name":"Jenex International Pte Ltd"},
{"id":"00000000007","name":"Jenex Limited"},
{"id":"00000000001","name":"Halorey Pte Ltd"},
{"id":"00000000002","name":"Halorey Trading LLC"}
]

我在此修复程序中找到的唯一解决方案是将Typeahead中的limit选项设置为大于sql_getentities.php返回的数据总数。但是,当数据集增长时,下拉列表将变得非常长,这不是目标。

我的代码有问题吗?

0 个答案:

没有答案