Question

我正在尝试实现一个过滤器，当文本与用户在输入html元素中输入的内容匹配时，过滤器将过滤“pre”html元素。

但是当我尝试检查用户输入的内容时它似乎不起作用，但是如果我对要搜索的文本进行硬编码则会起作用。

这是我的js脚本：

$(document).ready(function(){ 
        $("#input")
        .change( function () {
            var filter = $(this).val();
            if(filter) {
            $("#list").find("pre:contains(\""+filter+"\")").show()
            $("#list").find("pre:not(contains(\""+filter+"\"))").hide()

            } else {

            }
            return false;
            })
        .keyup( function () {

            $(this).change();
            }); });

如果我将“过滤器”硬编码为“pre”元素中的某些字符串，则可以正常工作。例如：其中一个字符串中有“sys”，所以如果我硬编码： $("#list").find("pre:contains("sys")").hide()：它隐藏了元素。

Answer 1

检查引号，你不需要转义引号：

$("#input").change(function() {
  var filter = this.value;
  $("#list").find("pre:contains(" + filter + ")").show() // show the filtered one
            .siblings('pre').hide(); // hide others.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='input'>
  <option>Filter it...</option>
  <option>where</option>
  <option>sys</option>
</select>
<div id='list'>
  <pre>what</pre><br>
  <pre>when</pre><br>
  <pre>sys</pre><br>
  <pre>where</pre><br>
</div>

问题是伪选择器:contains()的用法。您想要隐藏其他元素的第二行之前错过了:（可以在不这样做的情况下完成。）使用.siblings('pre')链接并隐藏与.hide()。检查上面的答案。

Answer 2

第二行隐藏，

$("#list").find("pre:not(contains("+filter+"))").hide()

转换为

$("#list").find("pre:not(contains(sys)").hide()

会为(contains(..))

抛出无法识别的expr

:应与contains()进行对:not(:contains(...))的最终评估

$("#list").find("pre:not(:contains("+filter+"))").hide()
//                       ^

<强> Fiddle Demo

jquery：包含给出错误：jquery-1.12.3.js：1502 Uncaught Error：语法错误，无法识别的表达式：contains（“sys”）

2 个答案: