автоматическое полное точное совпадение с начала использования автозаполнения jquery из простого массива
Как включить точное совпадение с начала строки с помощью автозаполнения jquery с вводом из простого массива?
Если у меня есть следующий массив:
- умный
- oversmart
- smartland
- undersmart
- verysmart
и если я набираю " sma..."в текстовом вводе мне должны быть показаны только smart и smartland, а не другие.
5 ответов
вам просто нужно изменить параметр источника как функцию в соответствии с вашими потребностями. Вот так:
Update: добавление кода для ответа:
var acList = ['smart', 'oversmart', 'smartland', 'undersmart', 'verysmart'];
$('#ac').autocomplete({
source: function (request, response) {
var matches = $.map(acList, function (acItem) {
if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
return acItem;
}
});
response(matches);
}
});
способ сделать это задокументирован в http://api.jqueryui.com/autocomplete/
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
вы можете использовать регулярные выражения для сопоставления введенной подстроки со значениями в имеющемся массиве.
JQuery имеет слишком много плагинов. Просто посыпьте его небольшим регулярным выражением и напишите что-то вроде этого (я не тестировал его, но я делал подобные вещи раньше):
$('#someTextInput').keyup( function(){
var regExMatch = new RegEx( '^' + $(this).val() );
$_LIs = $('#someUl li');
$_LIs.hide();
$_LIs.each( function(){
if( this.innerText.match(regExMatch) ) { $(this).show(); }
} );
} );
вы можете удалить '^' +
на new RegEx
параметры для восстановления поведения, которое вы описываете как проблемное. '^'
означает начало выбора строки/строки, поэтому "s" не будет совпадать, если он не находится в начале.
это изменилось с момента принятия предыдущего ответа. Сейчас lookupFilter
возможность сделать это, и это намного проще. От https://stackoverflow.com/a/23239873/1204434, Просто добавьте это в свой список опций:
lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0;
},