0

cpanel検索のような機能を探しています。検索ボックスに入力すると、同様のコンテンツが残り、残りは消えます。例

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

今、私が「彼」とタイプし始めると。hellodisplayと残りのdivのみがdisplay：noneになります。

出来ますか？Cpanelの検索ボックスを見たことがある人は、私が何を求めているかを知っています。私はこれを探していましたが、それに似たものは見つかりませんでした。前もって感謝します。

4

2 に答える 2

2

確かに非常に単純です。を使用して、それに応じて'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; 
 };
于 2012-06-13T20:21:02.467 に答える
1

ええ、それは可能です。

これが私のフィドルです：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();
  });
});​
于 2012-06-13T20:21:51.060 に答える