javascript - JQuery UI 自动完成字母顺序，然后是匹配项

Question

我正在研究 JQueryUI 自动完成，并且希望行为与默认行为略有不同。我有一个字符串数组:

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

当我输入以下内容进行自动完成时，我希望得到以下结果。

类型:“R”

实际结果:

小石城

罗德岛州

罗克福特

预期结果:

罗德岛州

罗克福特

小石城

类型:摇滚

实际结果:

小石城

罗克福特

预期结果:

罗克福特

小石城

这是我的 jsFiddle

我希望结果首先按字母顺序排序，然后是匹配项。我看了这个link但这只能让我按字母顺序排列。当我输入“Rock”时，我只会得到 RockFord。

有什么想法吗？

Answer 1

尝试使用 ._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