Twitter's Typeahead Limit not working

Question

I have installed twitter's typeahead plugin but I can't get the limit to work.

I placed it in two different positions:

$('input.typeahead').typeahead({
limit: 5,
hint: true,
highlight: false,
minLength: 1
}, {
name: 'country',
displayKey: 'value',
source: substringMatcher(countries)

And I also tried this:

$('input.typeahead').typeahead({

hint: true,
highlight: false,
minLength: 1
}, {
limit: 5,
name: 'country',
displayKey: 'value',
source: substringMatcher(countries)

The rest of my code:

var substringMatcher = function (strs) {
return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function (i, str) {
        if (substrRegex.test(str)) {
            // the typeahead jQuery plugin expects suggestions to a
            // JavaScript object, refer to typeahead docs for more info
            matches.push({
                value: str
            });
        }
    });

    cb(matches);
};
};

 var countries = [ "United States", "United Kingdom",  "Canada", "Andorra", "United Arab Emirates", "Afghanistan", "Antigua and Barbuda", "Anguilla", "Albania", "Armenia", "Angola", "Antarctica", "Argentina", "American Samoa", "Austria", "Australia", "Aruba", "Åland", "Azerbaijan", "Bosnia and Herzegovina", "Barbados", "Bangladesh", "Belgium", "Burkina Faso", "Bulgaria", "Bahrain", "Burundi", "Benin", "Saint Barthélemy", "Bermuda", "Brunei", "Bolivia", "Bonaire", "Brazil", "Bahamas", "Bhutan", "Bouvet Island", "Botswana", "Belarus", "Belize",  "Cocos [Keeling] Islands", "Congo", "Central African Republic", "Republic of the Congo", "Switzerland", "Ivory Coast", "Cook Islands", "Chile", "Cameroon", "China", "Colombia", "Costa Rica", "Cuba", "Cape Verde", "Curacao", "Christmas Island", "Cyprus", "Czechia", "Germany", "Djibouti", "Denmark", "Dominica", "Dominican Republic", "Algeria", "Ecuador", "Estonia", "Egypt", "Western Sahara", "Eritrea", "Spain", "Ethiopia", "Finland", "Fiji", "Falkland Islands", "Micronesia", "Faroe Islands", "France", "Gabon", "Grenada", "Georgia", "French Guiana", "Guernsey", "Ghana", "Gibraltar", "Greenland", "Gambia", "Guinea", "Guadeloupe", "Equatorial Guinea", "Greece", "South Georgia and the South Sandwich Islands", "Guatemala", "Guam", "Guinea-Bissau", "Guyana", "Hong Kong", "Heard Island and McDonald Islands", "Honduras", "Croatia", "Haiti", "Hungary", "Indonesia", "Ireland", "Israel", "Isle of Man", "India", "British Indian Ocean Territory", "Iraq", "Iran", "Iceland", "Italy", "Jersey", "Jamaica", "Jordan", "Japan", "Kenya", "Kyrgyzstan", "Cambodia", "Kiribati", "Comoros", "Saint Kitts and Nevis", "North Korea", "South Korea", "Kuwait", "Cayman Islands", "Kazakhstan", "Laos", "Lebanon", "Saint Lucia", "Liechtenstein", "Sri Lanka", "Liberia", "Lesotho", "Lithuania", "Luxembourg", "Latvia", "Libya", "Morocco", "Monaco", "Moldova", "Montenegro", "Saint Martin", "Madagascar", "Marshall Islands", "Macedonia", "Mali", "Myanmar [Burma]", "Mongolia", "Macao", "Northern Mariana Islands", "Martinique", "Mauritania", "Montserrat", "Malta", "Mauritius", "Maldives", "Malawi", "Mexico", "Malaysia", "Mozambique", "Namibia", "New Caledonia", "Niger", "Norfolk Island", "Nigeria", "Nicaragua", "Netherlands", "Norway", "Nepal", "Nauru", "Niue", "New Zealand", "Oman", "Panama", "Peru", "French Polynesia", "Papua New Guinea", "Philippines", "Pakistan", "Poland", "Saint Pierre and Miquelon", "Pitcairn Islands", "Puerto Rico", "Palestine", "Portugal", "Palau", "Paraguay", "Qatar", "Réunion", "Romania", "Serbia", "Russia", "Rwanda", "Saudi Arabia", "Solomon Islands", "Seychelles", "Sudan", "Sweden", "Singapore", "Saint Helena", "Slovenia", "Svalbard and Jan Mayen", "Slovakia", "Sierra Leone", "San Marino", "Senegal", "Somalia", "Suriname", "South Sudan", "São Tomé and Príncipe", "El Salvador", "Sint Maarten", "Syria", "Swaziland", "Turks and Caicos Islands", "Chad", "French Southern Territories", "Togo", "Thailand", "Tajikistan", "Tokelau", "East Timor", "Turkmenistan", "Tunisia", "Tonga", "Turkey", "Trinidad and Tobago", "Tuvalu", "Taiwan", "Tanzania", "Ukraine", "Uganda", "U.S. Minor Outlying Islands", "Uruguay", "Uzbekistan", "Vatican City", "Saint Vincent and the Grenadines", "Venezuela", "British Virgin Islands", "U.S. Virgin Islands", "Vietnam", "Vanuatu", "Wallis and Futuna", "Samoa", "Kosovo", "Yemen", "Mayotte", "South Africa", "Zambia", "Zimbabwe"];

$('input.typeahead').typeahead({
limit: 5,
hint: true,
highlight: false,
minLength: 1
}, {
name: 'country',
displayKey: 'value',
source: substringMatcher(countries)

});
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

CSS:

<div class="row form-row m-l-20 m-r-20 xs-m-l-10 xs-m-r-10">
    <div class="col-md-6 col-sm-6">
        <input name="country" type="text" class="typeahead input-sm form-control"  autocomplete="off" spellcheck="false" placeholder="Country">
    </div>
</div>

Overthrust

Answer 1

As @elachell mentioned the limit is buggy.

You can set limit: 'Infinity' and limit the results on the server side.

Autoeroticism

Answer 2

I found out that the typeahead limit option has a buggy behavior.

As recommended in this thread consider using this fork instead: https://github.com/corejavascript/typeahead.js

I could have saved hours of debugging if I had used this one before

Cryostat

Love it! Thanks for this. – Unsay

Answer 3

Setting a limit after a 'sourse' solved the problem in my case.

So try the following:

$('input.typeahead').typeahead({
    hint: true,
    highlight: false,
    minLength: 1
  }, 
  {
    name: 'country',
    displayKey: 'value',
    source: substringMatcher(countries),
    limit: Number.MAX_VALUE
});

Lip

Number.MAX_VALUE solved it for me. limit 10(!) was not working. – Overburden

Answer 4

I believe that you might be striking the problem where the limit option has been moved from typeahead.js to the typeahead.js suggestion engine Bloodhound.

From the Bloodhound docs;

limit – The max number of suggestions to return from Bloodhound#get. If not reached, the data source will attempt to backfill the suggestions from remote. Defaults to 5.

An alternative might be to adjust minLength (The minimum character length needed before suggestions start getting rendered) to a higher number than the default of 1.

Desensitize