如何使用jQuery实现按列表项首字母筛选列表功能？

你当前的筛选逻辑使用indexOf(value) > -1判断字符是否存在，实现的是任意位置包含的模糊匹配，要改成仅匹配首字母，只需将匹配逻辑替换为字符串的startsWith()方法即可，建议同时添加trim()去除文本前后的空白字符，避免内容开头的空格影响匹配结果。

核心修改点 #

• 原匹配逻辑：$(this).text().toLowerCase().indexOf(value) > -1
• 替换为首字母匹配逻辑：$(this).text().trim().toLowerCase().startsWith(value)

优化后完整jQuery代码 #

$(document).ready(function(){
    // 抽离公共筛选逻辑，减少重复代码
    function filterList() {
      var value = $("#search-box").val().toLowerCase();
      var filter = $('#search-filter').val().toLowerCase();
      if(filter == "listitem") {
        $(".listitem").filter(function() {
          $(this).toggle($(this).text().trim().toLowerCase().startsWith(value))
        });
      } else {
        $(".td-"+filter).filter(function() {
          $(this).parent().toggle($(this).text().trim().toLowerCase().startsWith(value))
        });
      }
    }

    // 输入框输入触发筛选
    $("#search-box").on("keyup", filterList);
    // 筛选类型切换触发筛选
    $('#search-filter').on("change", filterList);

    $(".tbl-btn").click(function(e) {
      e.preventDefault();
      $(this).parent().parent().find('td:not(:first-child)').toggleClass('active');
      $(this).toggleClass('rotate');
    });
});

老旧浏览器兼容方案 #

如果需要兼容IE等不支持startsWith()方法的浏览器，可以用indexOf(value) === 0替换startsWith(value)，效果完全一致：

// 兼容写法示例
$(this).text().trim().toLowerCase().indexOf(value) === 0

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