您的位置: 首页  >  技术问答  >  Twitter的Typeahead限制不起作用

Twitter的Typeahead限制不起作用

分类: 技术问答 • 2022-07-20 18:33:04
问题描述：

我已经安装了twitter的typeahead插件，但我无法获得工作的限制。Twitter的Typeahead限制不起作用

enter image description here我把它放在两个不同的位置：

$('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", "*", "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]", "*", "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", "*", "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>

答

我相信你可能会在limit选项从typeahead.js移动到typeahead.js建议引擎Bloodhound时出现问题。

来自Bloodhound docs;

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

另一种方法是将minLength（建议开始渲染前需要的最小字符长度）调整为比缺省值1更高的数字。

答

我发现typeahead限制选项有bug的行为。

在本thread建议考虑使用此叉代替： https://github.com/corejavascript/typeahead.js

我可以节省调试的时间，如果我用这一个前

答

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

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

所以请尝试以下操作：

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

相关推荐