JQuery UI自动完成字母排序后跟匹配换句话说

我正在使用JQueryUI自动完成，并希望有一个稍微不同于默认行为的行为。我有一串字符串：JQuery UI自动完成字母排序后跟匹配换句话说

var json = ["Atlanta", "Chicago", "Little Rock", "RockFord", "Rhode Island"];

我想将以下结果输入到自动完成时。

类型：“R”

实际结果：

小石城

罗德岛

罗克福德

预期结果：

罗德岛

罗克福德

小石城

类型：岩

实际结果：

小石城

罗克福德

预期结果：

罗克福德

小石城

这里是我的jsFiddle

我想结果被按字母顺序换句话说比赛第一有序其次。我看着这个link，但那只能让我按字母排序。当我输入“Rock”时，我只能得到RockFord。

任何想法？

来源

2015-09-05 user1527762

尝试利用._renderMenu，$.grep()

var json = ["Alabama", 
 
    "Alaska", 
 
    "Arizona", 
 
    "Arkansas", 
 
    "California", 
 
    "Colorado", 
 
    "Connecticut", 
 
    "Delaware", 
 
    "Florida", 
 
    "Georgia", 
 
    "Hawaii", 
 
    "Idaho", 
 
    "Illinois", 
 
    "Indiana", 
 
    "Iowa", 
 
    "Kansas", 
 
    "Kentucky", 
 
    "Little Rock", 
 
    "Louisiana", 
 
    "Maine", 
 
    "Maryland", 
 
    "Massachusetts", 
 
    "Michigan", 
 
    "Minnesota", 
 
    "Mississippi", 
 
    "Missouri", 
 
    "Montana", 
 
    "Nebraska", 
 
    "Nevada", 
 
    "New Hampshire", 
 
    "New Jersey", 
 
    "New Mexico", 
 
    "New York", 
 
    "North Carolina", 
 
    "North Dakota", 
 
    "Ohio", 
 
    "Oklahoma", 
 
    "Oregon", 
 
    "Pennsylvania", 
 
    "RockFord", 
 
    "Rhode Island", 
 
    "South Carolina", 
 
    "South Dakota", 
 
    "Tennessee", 
 
    "Texas", 
 
    "Utah", 
 
    "Vermont", 
 
    "Virginia", 
 
    "Washington", 
 
    "West Virginia", 
 
    "Wisconsin", 
 
    "Wyoming", 
 
]; 
 

 
json.sort(); 
 

 
$("input").autocomplete({ 
 
    source: json 
 
}).data("ui-autocomplete")._renderMenu = function(ul, items) { 
 
    var that = this; 
 
    var val = that.element.val(); 
 
    $.each($.grep(items, function(value, key) { 
 
    return new RegExp(val.toLowerCase()) 
 
      .test(value.value.toLowerCase().slice(0, val.length)) 
 
    }), function(index, item) { 
 
    that._renderItemData(ul, item); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"> 
 
</script> 
 
<input type="text" />

的jsfiddle http://jsfiddle.net/Gm9Bz/75/

又见_renderMenu(ul, items)，jQueryUI: how can I custom-format the Autocomplete plug-in results?，Override both _renderItem and _renderMenu

来源

2015-09-05 16:01:59 guest271314

感谢您的回复，但它并不总是有效，我试图扩大阵列以包括美国50个州。键入R或M等的示例不会返回预期的结果。 HTTP：//的jsfiddle。net/Gm9Bz/74/ – user1527762

非常感谢。它的工作完美。 –

JQuery UI自动完成字母排序后跟匹配换句话说

回答

相关问题