CODEWITHSUNDEEP
javascripttypeahead.js
cwhisperer
cwhisperer

Reputation: 1926

typeahead js not showing results

I want to use typeahead to retrieve postal codes remotely and it must be post, not get. The call returns following json in the console:

{suggestions: "L-6956 | IM GRUND | KEEN-SUR-DOHEEM"}
{suggestions: "L-6956 | OP DER MOUCK | KEEN-SUR-DOHEEM"}

But the result is not shown under the input field in order to select one of the results. Here is my code:

$('#txtPostalCode').typeahead(
  null,
  {
    name: 'txtPostalCode',
    displayKey: 'suggestions',
    minLength: 3,
    source: function (query, syncResults) {
      $.post('/hotbed/sggl/getpipedaddresses', {searchItem: query}, function (data) {
        syncResults($.map(data, function (item) {
          console.log(item.suggestions);
          return item;
        }));
      }, 'json');

    }
  });

Upvotes: 2

Views: 1713

Answers (1)

Daniel Netzer
Daniel Netzer

Reputation: 2232

According to typeahead API, server response should be marked as an Async and your response should be fetched using that asyncCB,

$('#txtPostalCode').typeahead({
  null
},
{
  name: 'txtPostalCode',
  displayKey: 'suggestions',
  minLength: 3,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/hotbed/sggl/getpipedaddresses", 
      type: 'POST',
      data: {searchItem: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

since there is on open bounty for this question I cant mark it as duplicate but you might find more details at the following question,

Duplicate of this question

Upvotes: 3

Related Questions