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自動完成字母排序後跟匹配換句話說

回答

相關問題