Twitter的Typeahead Limit不起作用

Question

我已安装了twitter的typeahead插件，但我无法获得限制。

我把它放在两个不同的位置：

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

我也试过这个：

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

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

我的其余代码：

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>

Answer 1

我相信您可能会遇到limit选项已从typeahead.js移至typeahead.js建议引擎Bloodhound的问题。

来自Bloodhound docs;

limit - 从Bloodhound#get返回的最大建议数。如果未达到，数据源将尝试从remote回填建议。默认为5。

另一种方法是将minLength（建议开始呈现之前所需的最小字符长度）调整为高于默认值1的数字。

Answer 2

我发现typeahead限制选项有一个错误的行为。

根据此thread的建议，请考虑使用此fork： https://github.com/corejavascript/typeahead.js

如果我在

之前使用过这个，我可以节省数小时的调试时间

Answer 3

我花了整整一天才找到解决方案。

最后在'sourse'之后设置一个限制解决了我的问题。

请尝试以下方法：

    $(document).ready(function() {
    	$(".b").focus(function(){
    		$(".d").show();
    	});

    	$(".a").focus(function(){
    		$(".d").show();
    	});
    	
    	$(".b").blur(function(){
    		setTimeout(function() {
    			if(!$(".a").is(":focus")) {
    				if($(".b").val().length > 0){
    					$(".d").show();
    				}else{
    					$(".d").hide();
    				}
    			}
    		}, 10);
    	});
    	
    	$(".a").blur(function(){
    		if($(this).val().length > 0){
    			$(".d").show();
    		}else{
    			$(".d").hide();
    		}
    	});
    });

Answer 4

正如@elachell所说，限制是错误的。

您可以设置limit: 'Infinity'并限制服务器端的结果。