Question

我有以下结构中的div列表 -

HTML

<div class="firstDiv">
   <input type="text" id="searcher" placeholder="Search names (start typing)">
   <div class="secondDiv">
      <div class="entryDiv">
         <input id="colin">
      </div>
      <div class="entryDiv">
         <input id="chris">
      </div>
      <div class="entryDiv">
         <input id="zander">
      </div>
   </div>
</div>

JS

$(document).ready(function () {

$("#searcher").on("keyup click input", function () {
if (this.value.length > 0) {
  $(".secondDiv entryDiv").hide().filter(function () {
    return $(this).text().toLowerCase().indexOf($("#searcher").val().toLowerCase()) != -1;
  }).show();
}
else {
  $(".secondDiv entryDiv").hide();
}
});

});

我尝试做的是使用搜索框 - searcher使用jquery，以便在按键时entryDiv根据输入的id="colin"值动态显示或隐藏取决于输入的内容。因此，如果用户输入字母＆＃34; c＆＃34;两个div包含＆＃34; colin＆＃34;和＆＃34;克里斯＆＃34;然而，它将留在现场＆＃34; zander＆＃34;将被删除。如果搜索框为空，则列表默认返回原始视图。

与显示here.

的示例非常相似

Answer 1

首先，您的问题指定

因此，如果用户输入字母＆＃34; c＆＃34;两个div包含＆＃34; colin＆＃34;和＆＃34;克里斯＆＃34;然而，它将留在现场＆＃34; zander＆＃34;将被删除

您的所有输入都不包含，他们都有ID。也许你想要的是，例如

<input value="colin">

这将使字段包含该文本。

接下来，您的选择器缺少一段时间：

$(".secondDiv entryDiv")....

应该是

$(".secondDiv .entryDiv")....

最后，这是一个工作样本

＆＃13;

$("#searcher").on("keyup click input", function () {
    var val = $(this).val();
    if (val.length) {
        $(".secondDiv .entryDiv").hide().filter(function () {
            return $('input',this).val().toLowerCase().indexOf(val.toLowerCase()) != -1;
        }).show();
    }
    else {
        $(".secondDiv .entryDiv").show();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstDiv">
   <input type="text" id="searcher" placeholder="Search names (start typing)">
   <div class="secondDiv">
      <div class="entryDiv">
         <input value="colin">
      </div>
      <div class="entryDiv">
         <input value="chris">
      </div>
      <div class="entryDiv">
         <input value="zander">
      </div>
   </div>
</div>

＆＃13;

Answer 2

http://jsfiddle.net/mc5q4efz/2/

简化：

$("#searcher").on("keyup", function (e) {
    var input = $(this).val();
    if (input.length > 0){
        $('div.entryDiv > input').hide();
        $( "input[id*="+input+"]" ).show();
    }else{
        $('div.entryDiv > input').show();
    }
});

动态搜索div列表

2 个答案: