使用jquery在LI中搜索

时间:2014-01-17 10:34:31

标签: javascript jquery html

我正在搜索500 li的列表。使用以下代码。但面临两个问题。一,当我在输入内容后非常快速地按退格键时,它不被捕获。并且搜索是区分大小写的,我不想要。请在下面的代码中提出改进建议:

$('#find_question').bind("keyup", function() {
    searchWord = $(this).val();
    console.log("input length",searchWord);
    if (searchWord.length >= 0) {

        $('#leftSection li').each(function(i, data) {
            text = $(this).text();
            if (text.match(RegExp(searchWord, 'i')))
                $(this).show();

            else
                $(this).hide();
        });
    }
});

1 个答案:

答案 0 :(得分:1)

试试这个

containsIgnoreCase来自How do I make jQuery Contains case insensitive, including jQuery 1.8+?

Live Demo

 $.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
 };

$function() {
  $('#find_question').on("keyup", function() {
    searchWord = $(this).val();
    $('#leftSection li').hide();
    if (searchWord.length >= 0) {
      $('#leftSection li:containsIgnoreCase("'+searchWord+'")').show();
    }
  });
});