隐藏与用户条目不匹配的元素

时间：2015-10-21 19:04:50

标签： jquery jquery-ui

尝试在用户键入文本时过滤一组元素。我希望包含匹配的元素到被键入的元素移动到顶部，而其他元素同时隐藏。我的代码隐藏了一切。

＆＃13;
＆＃13; 
$('input#sort-plate').keyup(function () {
        var value = $('input#sort-plate').val();

        var match = $(".name").filter(function() {
            // don't do this -> return $(this).text().match(new RegExp(value, "i"));
            return $(this).text().toLowerCase().indexOf(value) !== -1;
        });
        if (match.length) {
            $(".sort-plate").first().before(match.first().parent()).addClass('show-me');
        }
     $(".sort-plate").hide();
    });
＆＃13; 
.name, .center, .phone {
    font-size: 14px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.name {
    width: 55%
}
.center, .phone {
    width: 20%;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
    <form action="#">
        <input type="text" id="sort-plate" />
     
      
        </form>
        <br />
        <br />
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angelina Jolie</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Michael Jordan</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Deka Junior</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
    </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angela Jones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Ikechukwu Adaora</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
    
     <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        
         <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Ndolo</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        
         <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Stones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        
         <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Johnson</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

$('input#sort-plate').keyup(function () {
  var value = $('input#sort-plate').val();
  $(".sort-plate").hide();
  var match = $(".name").filter(function() {
    return $(this).text().toLowerCase().indexOf(value) !== -1;
  });
  for(var i = 0; i < match.length; i++) {
    match.closest('.sort-plate').show();
  }
});
.name, .center, .phone {
    font-size: 14px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.name {
    width: 55%
}
.center, .phone {
    width: 20%;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
  <form action="#">
    <input type="text" id="sort-plate" />
  </form>
  <br />
  <br />
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Angelina Jolie</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Michael Jordan</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Deka Junior</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Okorondu</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Angela Jones</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Ikechukwu Adaora</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Okorondu</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Ndolo</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Stones</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Johnson</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
</div>

答案 1 :(得分：1)

我会使用each进行一次点击，无需保留匹配列表，因为您可以随时处理每个匹配：

$('input#sort-plate').keyup(function () {
    var value = $('input#sort-plate').val();
    console.log(value);

    $(".sort-plate").each(function () {
        var $this = $(this);
        if ($(".name", this).text().toLowerCase().indexOf(value) !== -1) {
            $this.show();
        } else {
            $this.hide();
        }
    });
});

答案 2 :(得分：1)

如何使用each，toggle和regex 

$('input#sort-plate').keyup(function () {
    var value = $('input#sort-plate').val();    
    $.each($('.sort-plate'),function(){
        $(this).toggle(new RegExp(value, 'i').test($('.name', this).text()));
    });
});

Fiddle

答案 3 :(得分：1)

尝试将$.each(response, function(_, obj) { $.each(obj, function(key, val) { if (key === 'unavailables') { // here you go } }); }); 元素添加到div作为#plate元素的容器，.sort-plate从.replace()文本检查中删除"Name"，{{ 1}}，.name将所选元素添加到Array.prototype.sort()

之上

＆＃13;
＆＃13; 
.preprendTo()
＆＃13; 
div
＆＃13; 
$('input#sort-plate').on("input", function() {
  var value = this.value;

  var match = $(".sort-plate").filter(function() {
    return new RegExp(value, "i").test($(".name", this).text()
      .replace(/Name/, ""))
  }).get().sort(function(a, b) {
    return a.textContent
           .replace(/Name/, "")
           .toLowerCase()
           .indexOf(value.toLowerCase()) 
           <                    
           b.textContent
           .replace(/Name/, "")
           .toLowerCase().indexOf(value.toLowerCase()) 
           ? 1 : -1
  });
  if (match.length) {

    $(match).each(function() {
      $(this).removeClass("not-matched")
        .addClass("matched")
        .prependTo($("#plate div:first"))
    })
    $(".sort-plate").not(".matched")
      .removeClass("matched")
      .addClass("not-matched")
  }

});
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题