时间戳

首页 > 解决方案 > 显示自动完成的干净结果

javascript - 显示自动完成的干净结果

问题描述

我在网上找到了这段代码，它提供了自动完成的选项，我想提供以字母开头的选项。例如，如果键入字母“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;});

标签： javascriptjqueryruby-on-railsautocomplete

解决方案

解决方案非常简单。我找到了仅用于此的过滤方法。所有需要做的就是用这个替换那个函数：

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

推荐阅读