Question

我在线找到了此代码，其中提供了自动完成选项，我想提供以字母开头的选项。例如，如果键入字母“ a”，我只想给选项以“ a”开头，而不是包含“ a”的选项，因此从代码中，当我键入“ a”时，我只想显示苹果，而不是菠萝。我该怎么办？

var x = [
{ label : 'apple', value : 'Delicious' },
{ label : 'pineapples', value : 'Delicious' },
{ label : 'kiwi', value : 'Yummy' },
{ label : 'kiwiooo', value : 'aaa' },
{ label : 'lemon', value : 'Sour' }
];

$( "#fruit" ).autocomplete({
source: x,
focus : function(){ return false; }}).on( 'autocompleteselect',           
function( e, ui ){
var t = $(this),
details = $('#taste'),
label = ( e.type == 'autocompleteresponse' ? ui.content[0].label :      
ui.item.label ),
value = ( e.type == 'autocompleteresponse' ? ui.content[0].value : 
ui.item.value );
t.val( label );
details.val( value );
return false;});

Answer 1

解决方案非常简单。我找到了用于此的过滤方法。所有需要做的就是用以下命令替换该函数：

// Overrides the default autocomplete filter function to and find only from the beginning of the string
<script>
$("#fruit").autocomplete({ source: function(request, response) {
  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
  response($.grep(myArray, function(item){
     return matcher.test(item);
  }));
 }
});
</script>

我以前使用过另一种解决方案。

source: function(request, response) {
var filteredArray = $.map(orignalArray, function(item) {
    if( item.value.startsWith(request.term)){
        return item;
    }
    else{
        return null;
    }
});
response(filteredArray);
}

显示干净的自动完成结果

1 个答案: