如何实现搜索结果数组的匹配位置优先+字母顺序排序？

嘿，这个排序需求很常见！咱们可以通过给sort()方法传一个自定义比较函数来实现，核心思路是先区分「以搜索词开头的元素」和「仅包含搜索词的元素」，再分别对这两类进行字母排序。

核心逻辑拆解 #

1. 统一大小写：把搜索词和数组元素都转成小写，避免大小写对匹配和排序的干扰
2. 优先级判断：
   • 若A以搜索词开头，B不开头 → A排在B前面
   • 若B以搜索词开头，A不开头 → B排在A前面
   • 若两者都开头/都不开头 → 按常规字母顺序排序（用localeCompare更稳妥，支持多语言字符排序）

修改后的完整代码 #

const myArray = ['testB', 'testD', 'testC', 'dtest', 'cTest']
let tempArray = []
$('input').on('input', function() {
  tempArray = []
  const searchTerm = $(this).val().toLowerCase() // 统一转小写
  // 先过滤出包含搜索词的元素
  for (var i = 0; i < myArray.length; i++) {
    if (myArray[i].toLowerCase().includes(searchTerm)) {
      tempArray.push(myArray[i])
    }
  }
  // 自定义排序函数
  tempArray.sort((a, b) => {
    const aLower = a.toLowerCase()
    const bLower = b.toLowerCase()
    const aStartsWith = aLower.startsWith(searchTerm)
    const bStartsWith = bLower.startsWith(searchTerm)
    
    // 优先级判断：开头匹配的元素排前面
    if (aStartsWith && !bStartsWith) {
      return -1
    }
    if (!aStartsWith && bStartsWith) {
      return 1
    }
    // 同优先级的元素，按字母顺序排序
    return aLower.localeCompare(bLower)
  })
  
  $('p').html(JSON.stringify(tempArray))
})

对应的HTML代码不变：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input />
<p></p>

测试验证 #

当你输入test时，输出结果会是：["testB","testC","testD","cTest","dtest"]，完全符合你的预期！

补充说明 #

• 用startsWith判断开头匹配，比手动截取字符串更简洁可靠
• localeCompare比直接用字符串比较（aLower > bLower ? 1 : -1）更好，它能处理特殊字符、多语言排序规则，结果更准确

内容的提问来源于stack exchange，提问作者seriously