0

I am using Typeahead v0.11.1

I have the following script to fetch data from the server in the format of key-value pairs, with keys 'id' and 'name'.

When I searched using a particular query, say 'trading', the results doesn't show all entries with the word trading, even though it hasn't exceeded the default limit of 5 results.

For instance, querying trading returns the result

Xujoq Marketing Trading Pte Ltd

while the following are not displayed

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">

json output from sql_getentities.php

[
{"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"}
]

The only solution I found around this fix is to set the limit option in Typeahead to more than the total number of data returned from sql_getentities.php. However, when the dataset grows, the dropdown list will become exceedingly long, which is not the objective.

Is there something wrong with my code?

revvy
  • 151
  • 3
  • 16
  • You are doing the matching yourself in your filter method. You need to look at what is going into the filter method and how each item is being evaluated. – trenthaynes May 01 '16 at 15:25
  • @whipdancer I've checked the variable `matches` that is returned from filter. The output is correct as I want it to be. But when the data is passed to Typeahead, for some reason things get left out. – revvy May 01 '16 at 23:22
  • can you create a fiddle to demonstrate the problem? – trenthaynes May 02 '16 at 00:54

0 Answers0