Question

我正在寻找像cpanel搜索一样的功能。当您在搜索框中键入内容时，类似内容会保留并且休息会消失。实施例

<div>hello</div>
<div>world</div>
<div>good</div>
<div>bad</div>
<input type="text" name="search">

现在我开始输入“他”。只有hello显示和div的其余部分才会显示：none;

有可能吗？看过Cpanel搜索框的人都知道我在问什么。我一直在寻找这个，但找不到类似的东西。提前谢谢。

Answer 1

当然很简单，只需使用keyup event并相应切换<div>

jsFiddle

<强> HTML

<div id="example">
  <div>hello</div>
  <div>world</div>
  <div>good</div>
  <div>bad</div>
</div>
<input type="text" name="search" id="search">

<强> JS

$(function(){
    $('#search').keyup(function(event){
        var keyCode = event.which; // check which key was pressed
        var term = $(this).val();
        $('#example').children().hide(); // hide all
        $('#example').children(':Contains("' + term + '")').show(); // toggle based on term
    });
 });

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

Answer 2

是的，这是可能的。

这是我的小提琴：http://jsfiddle.net/HQFQ5/2/

这是使其有效的功能：

$('input').bind('keyup',function(){
  var selfVal = $(this).val()
  var compareDivs = $('div');
  compareDivs.each(function(){
     var divVal = $(this).text().toString();
     if (divVal.indexOf(selfVal)<0)
         $(this).fadeOut();
     else
         $(this).fadeIn();
  });
});

jQuery - 在页面上键入时搜索，就像cpanel搜索一样

2 个答案: