Javascript 根据过滤器输入更改排序顺序

我正在尝试创建一个下拉列表，与美国各州一起过滤。下拉列表和筛选功能非常有效，但筛选功能按包含值而不是第一个字符的第一个项目进行排序，例如：

用户类型“Wa” 第一个选项是“Delaware”

我希望“华盛顿”首先出现，因为用户无论如何都不会为特拉华州键入WA。我该怎么做呢

//事件
$（“.dropdown container”）
.on（'单击'，''。下拉按钮'，函数（）{
$（'.dropdownlist'）.toggle（）；
})
.on（'输入'，''。下拉搜索'，函数（）{
var目标=$（此）；
var search=target.val（）.toLowerCase（）；
如果（！搜索）{
$（'li'）.show（）；
返回false；
}
$（'li'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
var match=text.indexOf（search）>-1；
$（此）.toggle（匹配）；
});
})
.on（'change'，'[type=“checkbox”]'，function（）{
var numChecked=$（'[type=“checkbox”]：checked'）。长度；
$（'.quantity'）.text（numChecked | | Any'）；
});
//用于演示目的的状态JSON
var usStates=[
{名称：'ALABAMA'，缩写：'AL'}，
{名称：'阿拉斯加'，缩写：'AK'}，
{名称：'美属萨摩亚'，缩写：'AS'}，
{名称：'ARIZONA'，缩写：'AZ'}，
{名称：'ARKANSAS'，缩写：'AR'}，
{名称：'CALIFORNIA'，缩写：'CA'}，
{名称：'COLORADO'，缩写：'CO'}，
{名称：'康涅狄格州'，缩写：'CT'}，
{名称：'DELAWARE'，缩写：'DE'}，
{名称：'哥伦比亚特区'，缩写：'DC'}，
{名称：'密克罗尼西亚联邦'，缩写：'FM'}，
{名称：'FLORIDA'，缩写：'FL'}，
{名称：'GEORGIA'，缩写：'GA'}，
{名称：'关岛'，缩写：'古'}，
{名称：'夏威夷'，缩写：'嗨'}，
{名称：'IDAHO'，缩写：'ID'}，
{名称：'ILLINOIS'，缩写：'IL'}，
{名称：'INDIANA'，缩写：'IN'}，
{名称：'IOWA'，缩写：'IA'}，
{名称：'KANSAS'，缩写：'KS'}，
{名称：'KENTUCKY'，缩写：'KY'}，
{名称：'LOUISIANA'，缩写：'LA'}，
{名称：'MAINE'，缩写：'ME'}，
{名称：'MARSHALL ISLANDS'，缩写：'MH'}，
{名称：'MARYLAND'，缩写：'MD'}，
{名称：'MASSACHUSETTS'，缩写：'MA'}，
{名称：'MICHIGAN'，缩写：'MI'}，
{名称：“明尼苏达”，缩写为：“MN'}，
{名称：'MISSISSIPPI'，缩写：'MS'}，
{名称：'MISSOURI'，缩写：'MO'}，
{名称：'MONTANA'，缩写：'MT'}，
{名称：'NEBRASKA'，缩写：'NE'}，
{名称：'NEVADA'，缩写：'NV'}，
{名称：'新罕布什尔州'，缩写：'新罕布什尔州'}，
{名称：'newjersey'，缩写：'NJ'}，
{名称：'新墨西哥'，缩写：'NM'}，
{名称：'纽约'，缩写：'纽约'}，
{名称：'NORTH CAROLINA'，缩写：'NC'}，
{名称：'NORTH DAKOTA'，缩写：'ND'}，
{名称：'北马里亚纳群岛'，缩写：'MP'}，
{名称：'OHIO'，缩写：'OH'}，
{名称：'OKLAHOMA'，缩写：'OK'}，
{名称：'俄勒冈州'，缩写：'或'}，
{名称：'PALAU'，缩写：'PW'}，
{名称：'PENNSYLVANIA'，缩写：'PA'}，
{名称：'波多黎各'，缩写：'PR'}，
{名称：'RHODE ISLAND'，缩写：'RI'}，
{名称：'SOUTH CAROLINA'，缩写：'SC'}，
{名称：'SOUTH DAKOTA'，缩写：'SD'}，
{名称：'TENNESSEE'，缩写：'TN'}，
{名称：'TEXAS'，缩写：'TX'}，
{名称：“犹他”，缩写：“UT'}，
{名称：'VERMONT'，缩写：'VT'}，
{名称：'维尔京群岛'，缩写：'六'}，
{名称：'VIRGINIA'，缩写：'VA'}，
{名称：'WASHINGTON'，缩写：'WA'}，
{名称：“西弗吉尼亚”，缩写：“WV”}，
{名称：'威斯康星州'，缩写：'威斯康星州'}，
{名称：'WYOMING'，缩写：'WY'}
];
//
模板
var statemplate=\u0.template(
“
”+
'' +
'' +
“
”
);
//用状态填充列表
_.每个州、职能{
s、 capName=uu.startCase（s.name.toLowerCase（））；
$（'ul'）.append（statemplate）；
});

如果您可以使用ES6，您可以替换：

var match = text.indexOf(search) > -1;

与

否则，可以使用正则表达式：

var match new RegExp(`^${search}`).test(text)

---

一些好的老式的vanilla js将允许您使用

filter

和

sort

来实现这一点。这假设您同意排序顺序基于字符串中的第一个匹配索引：

let search = 'WA';

let filtered = usStates
  .filter(state => state.name.includes(search))
  .sort((a, b) => a.name.indexOf(search) - b.name.indexOf(search));

console.log(filtered);

请参阅下面的内容，以了解它的实际作用

var usStates=[
{名称：'ALABAMA'，缩写：'AL'}，
{名称：'阿拉斯加'，缩写：'AK'}，
{名称：'美属萨摩亚'，缩写：'AS'}，
{名称：'ARIZONA'，缩写：'AZ'}，
{名称：'ARKANSAS'，缩写：'AR'}，
{名称：'CALIFORNIA'，缩写：'CA'}，
{名称：'COLORADO'，缩写：'CO'}，
{名称：'康涅狄格州'，缩写：'CT'}，
{名称：'DELAWARE'，缩写：'DE'}，
{名称：'哥伦比亚特区'，缩写：'DC'}，
{名称：'密克罗尼西亚联邦'，缩写：'FM'}，
{名称：'FLORIDA'，缩写：'FL'}，
{名称：'GEORGIA'，缩写：'GA'}，
{名称：'关岛'，缩写：'古'}，
{名称：'夏威夷'，缩写：'嗨'}，
{名称：'IDAHO'，缩写：'ID'}，
{名称：'ILLINOIS'，缩写：'IL'}，
{名称：'INDIANA'，缩写：'IN'}，
{名称：'IOWA'，缩写：'IA'}，
{名称：'KANSAS'，缩写：'KS'}，
{名称：'KENTUCKY'，缩写：'KY'}，
{名称：'LOUISIANA'，缩写：'LA'}，
{名称：'MAINE'，缩写：'ME'}，
{名称：'MARSHALL ISLANDS'，缩写：'MH'}，
{名称：'MARYLAND'，缩写：'MD'}，
{名称：'MASSACHUSETTS'，缩写：'MA'}，
{名称：'MICHIGAN'，缩写：'MI'}，
{名称：“明尼苏达”，缩写为：“MN'}，
{名称：'MISSISSIPPI'，缩写：'MS'}，
{名称：'密苏里'，a
var match new RegExp(`^${search}`).test(text)

let search = 'WA';

let filtered = usStates
  .filter(state => state.name.includes(search))
  .sort((a, b) => a.name.indexOf(search) - b.name.indexOf(search));

console.log(filtered);