TypeAhead.js and Bloodhound showing an odd number of results

bloodhound typeahead
typeahead javascript example
typeahead templates
jquery typeahead
bootstrap typeahead multiple select example
typeahead multiple datasets
typeahead js cdn
bootstrap typeahead ajax json example

I have a TypeAhead/Bloodhound implementation in my frontend, that fetches JSON-data from a Play/Scala-server. Typeahead-version is 0.11.1. The implementation is as follows:

HTML:

<div id="typeahead" class="col-md-8">
   <input class="typeahead form-control"  type="text" placeholder="Select the user">
</div>

JavaScript:

var engine = new Bloodhound({
  datumTokenizer: function (datum) {
    var fullName = fullName(datum);
    return Bloodhound.tokenizers.whitespace(fullName);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.id; },
  remote: {
    url: routes.controllers.Users.index("").url,
    cache: false,
    replace: function (url, query) {
        if (!isEmpty(query)) {
            url += encodeURIComponent(query);
        }
        return url;
    },
    filter: function (data) {
        console.log(data);
        return $.map(data, function (user) {
            return {
                id: user.id,
                fullName: viewModel.fullName(user)
            };
        });
    }
}
});

// instantiate the typeahead UI
$('#typeahead .typeahead')
.typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'engine',
    displayKey: 'fullName',
    source: engine
})

function fullName(data) {
  if (data === undefined) return "";
  else {
    var fName = data.firstName === undefined ? "" : data.firstName;
    var lName = data.lastName === undefined ? "" : data.lastName;
    return fName + ' ' + lName;
  }
};

JSON-response the server gives:

[{"firstName":"Test","lastName":"User", "id":1}, ... ]

The server pages the result so that it gives maximum of 5 results, which is supposed to be the default limit for Typeahead/Bloodhound as well.

The problem is that when the server returns 5 results, Typeahead shows 0 results in the overlay. If the server gives 4 results, TypeAhead shows 1 in the overlay. If the server gives 3 results, TypeAhead shows 2 results. For 2 and 1 results it shows the correct number of elements in the overlay. If I remove the page length and the server returns over 10 results, then TypeAhead shows 5 results (the limit). console.log inside the filter shows the correct number of data-results, so they go to Bloodhound at least.

What might be the issue with this code? This TypeAhead-field is the only TypeAhead-field present in this page. I checked the DOM, and TypeAhead generates wrong amount of result-set fields, so it's not a problem with CSS (tried to remove all custom CSS as well).

Thanks for any replies :)

There is an issue on typeahead in the code:

https://github.com/twitter/typeahead.js/issues/1218

You can change the code yourself in the JS as described on the issue page.

Bloodhound not returning all results · Issue #1486 · twitter , I had strange issues with Bloodhound right from the start where it would Here is an example of odd behavior where an actual value does not as it is more and more apparent that not all fetched results are shown in and many other. Bloodhound not returning all results corejavascript/typeahead.js#67. Bloodhound returns correct number of results. But if the number of results is same as the limit option in the datasets, then this results in showing "no-results" instead of showing all of them.

Twitter supposedly abandoned the project. Try the maintained fork. It has the issue fixed.

Unable to display more than 5 results with Bloodhound (0.11.1 , I'm using the version 0.11.1 of Typeahead.js with Bloodhound Do you have an example showing how to set limit in configuration as opposed  FWIW, I had to make sure that the limit was one less than the number of results being returned from my remote bloodhound object or nothing would show. Same here - even in January 2019. Almost bailed on typeahead because of it.

Try initializing engine with engine.initialize() ; returning suggestion object at filter , which should be available at templates -> suggestion ; initializing engine at source with source:engine.ttAdapter(); returning element as String at suggestion , to populate "suggestion" drop down menu . See Typeahead - examples - Custom Templates

var data = [{
  "firstName": "Test",
  "lastName": "User",
  "id": 1
}, {
  "firstName": "Test2",
  "lastName": "User2",
  "id": 2
}, {
  "firstName": "Test3",
  "lastName": "User3",
  "id": 3
}, {
  "firstName": "Test4",
  "lastName": "User4",
  "id": 4
}, {
  "firstName": "Test5",
  "lastName": "User5",
  "id": 5
}];

var engine = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $.map(data, function(val, key) {
            // return `suggestion` object for `templates` `suggestion`         
            return {value:val.firstName, suggestion:val}
         })
});
// initialize `engine`
engine.initialize();

// instantiate the typeahead UI
$("#typeahead .typeahead")
  .typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
  }, {
    name: "engine",
    displayKey: "firstName",
    templates: {
      suggestion: function (data) {
        // `suggestion` object passed at `engine`
        console.log(data.suggestion);
        // return suggestion element to display
        var _suggestion = "<div>" 
                        + data.suggestion.firstName 
                        + " " 
                        + data.suggestion.lastName + "</div>";
        return _suggestion
      }
    },
    source: engine.ttAdapter()
  });
<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>
<div id="typeahead" class="col-md-8">
  <input class="typeahead form-control" type="text" placeholder="Select the user">
</div>

javascript - Getting Bloodhound to work - Stack Overflow, So if limit: 10 then the first 10 records of the json data will be displayed, and the javascript - TypeAhead.js and Bloodhound showing an odd number of resu. Where 'questionsList' is a Bloodhound instance. The suggestions seem to be working fine when the query's number of matches is greater than 'limit' (10 in this case).

If (ike me) you don't want to go into the typeahead source, (for instance because you want to use the min version) you can also set limit very high. You will then have to limit the number of items to put into the list yourself.

$('#typeahead .typeahead')
.typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'engine',
    displayKey: 'fullName',
    source: engine,
    limit: 1000
})

Twitter Bloodhound results from function - typeahead - html, I'm using TypeAhead with Bloodhound to try achieve cacheable results I have implemented typeahead.js and bloodhound with a remote data source and it mostly type in at least X characters limit: 5, // limit to show only 5 results source: search. your CSS styles might also be conflicting (it looks odd to me at first sight). Since the number of suggestions is less than 5 (which is the default sufficient config option of Bloodhound), a request is made to the remote endpoint to get more results. The remote returns a response and then you can see that “Sweden” is automatically added to the suggested data list.

For anyone who finds this, use the maintained version of the code. The original is crap.

https://github.com/corejavascript/typeahead.js

Typeahead+js+with+Bloodhound+this+source+is+not+a+function, using Typeahead + Bloodhound and FOSJsRoutingBundle in Symfony2; TypeAhead.js and Bloodhound showing an odd number of results  For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.

bloodhound by apache, I had implemented hogan.js alongside typeahead.js at these version states:. Hogan 2.0.0; Typeahead 0.9.3; I'm trying to upgrade to: Hogan 3.0.2; Typeahead 0.10.5

twitter / typeahead.js. Watch 585 Bloodhound not returning all results #1486. Here is an example of odd behavior where an actual value does not get displayed

I have implemented typeahead.js and bloodhound with a remote data source and it mostly works as expected. However, I have set the minLength on the typeahead to 2 and while I can see an ajax request fire after 2 characters (and 3), the typeahead only offers suggestions after 4 characters or more.

Comments
  • There is indeed an issue with TypeAhead, modifying typeahead.bundle.js as Stnaire said in the Github-page helped.
  • This wasted so much time, ridiculous
  • I got to this question from "stackoverflow.com/questions/30370496/…" and tried your answer. it works perfectly well. Thank you! Hopefully, more people could check your solution :)