2016-08-02 166 views
0

我正在尝试JQuery自动完成示例。请参阅 - http://jsfiddle.net/LCv8L/797/Jquery自动完成建议

当我输入“Ar”时,应先给“Ar”相关项目。但它首先显示“An”,但我给出了minLength 1.可能是它正在考虑字母顺序。有没有解决这个问题的建议?

minLength: 1, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $("#customer-search").val(ui.item.label); 
     $("#selected-customer").val(ui.item.label); 
    }, 
    focus: function(event, ui) { 
     event.preventDefault(); 
     $("#customer-search").val(ui.item.label); 
    } 
}); 

回答

1

默认情况下包含字符串的自动完成搜索项目不以开头。

$('#customer-search').autocomplete({ 
    source: function(request, response) { 
     var filtered = $.map(data, function(item) { 
      if(item.value.toLowerCase().startsWith(request.term.toLowerCase())) { 
       return item; 
      } 
      else { 
       return null; 
      } 
     }); 
     response(filtered); 
    } 
}); 
+0

startsWith将不支持某些浏览器 –

+0

这不适用于主题。很容易用'this.indexOf(needle)== 0'来检查和替换。 –

+0

是的。它更好地提供了一个很好的解决方案,因为你说或其他item.match!== null :) –

1

尝试在“搜索”方法中更改名称空间中的正则表达式。

请jsfiddle.net/LCv8L/800/找到答案

+0

谢谢,我无法理解的变化,请你详细说明 – user123

+0

正如我所说我们可以手动进行搜索查询并返回源响应通过使用正则表达式。在这里,他们绑定了一个源代替JSON数组的方法,并且每次通过匹配给定输入的正则表达式进行过滤来返回源 –

1

运行这段代码在你的jsfiddle 这是工作,只要你想.. :) //使用正则表达式是更好的方法来防止这种情况。

var wordlist= [ 
     "Afghanistan", 
     "Albania", 
     "Algeria", 
     "American Samoa", 
     "Andorra", 
     "Angola", 
     "Anguilla", 
     "Antarctica", 
     "Antigua and Barbuda", 
     "Argentina", 
     "Armenia", 
     "Aruba", 
     "Australia", 
     "Austria", 
     "Azerbaijan" 
    ] ; 

    $("#customer-search").autocomplete({ 

     source: function(req, responseFn) { 
      var re = $.ui.autocomplete.escapeRegex(req.term); 
      var matcher = new RegExp("^" + re, "i"); 
      var a = $.grep(wordlist, function(item,index){ 
       return matcher.test(item); 
      }); 
      responseFn(a); 
     } 
    });