CODEWITHSUNDEEP
javascriptcsstwittertypeahead
dom
dom

Reputation: 321

Twitter's Typeahead Limit not working

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

enter image description hereI 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>

Upvotes: 5

Views: 6424

Answers (4)

Alex Valchuk
Alex Valchuk

Reputation: 620

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
});

Upvotes: 4

Yan Berk
Yan Berk

Reputation: 14428

As @elachell mentioned the limit is buggy.

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

Upvotes: 6

elachell
elachell

Reputation: 2677

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

Upvotes: 4

d3noob
d3noob

Reputation: 2151

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.

Upvotes: 3

Related Questions