Question

我正在使用一个简单的输入字段来搜索我的网站上的列表：

$('#f-search').keyup(function() {
    var q = $('#f-search').val().toLowerCase();
    $("#f-list .f // toLowerCase // :contains('q')").css('border-color', '#900');
});

我的问题是列表元素（.f）包含不可预知的大写字母，所以为了准确地检查输入我需要将其转换为小写，但我不知道该怎么做然后使用:contains。例如，如果一个.f包含“WoWoWoWoWzzzziees”但用户输入“哇”，则它与我当前的代码不匹配，但我希望它是。

Answer 1

你想要的是：

$("#f-list .f").filter(function() {
  return $(this)
         .text() // or .html() or .val(), depends on the element type
         .toLowerCase()
         .indexOf(q) != -1;
}).css('border-color', '#900');

比较"#f-list .f"所选元素内的文字，如果它们包含q变量中的内容，则会应用css修改。

修改

如果您还希望每次都重置列表，可以执行以下操作：

$("#f-list .f").css('border-color', 'WHATEVER IT WAS').filter(function() { return $(this) .text() // or .html() or .val(), depends on the element type .toLowerCase() .indexOf(q) != -1; }).css('border-color', '#900');

为了获得更好的性能，您可以像这样缓存您的列表：

var f_list = $("#f-list .f"), f_search = $('#f-search'); f_search.keyup(function() { var q = f_search.val().toLowerCase(); f_list.css('border-color', 'WHATEVER IT WAS').filter(function() { return $(this) .text() // or .html() or .val(), depends on the element type .toLowerCase() .indexOf(q) != -1; }).css('border-color', '#900'); });

Answer 2

您可以在jQuery中创建自己的自定义:contains选择器：

来自here和here以及here：

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
  return function( elem ) {
    return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

并像这样使用它（请注意新的选择器是:Contains，大写C）：

$("#f-list .f:Contains('q')").css('border-color', '#900');

如何在将所有内容转换为小写后检查元素是否包含字符串

2 个答案: