0

入力した検索値を含む div のみを表示したい。したがって、検索ボックスに入力upload loginすると、質問 1 と質問 3 のみが表示されます。

注：複数の検索入力値で機能する必要があります（例のように：値uploadANDを検索しlogin、この値を含むdivを表示する必要があります）。

注 2 : 検索入力が次のような場合は、質問 1 と質問 3 も表示されます。upl log

注 3 : 大文字と小文字は区別されません。したがってupload、 div(Question 1) を content でフィルタリングする必要がありますUpload。

これは私が得たものです： 

<section id="content">
<div id="search-block">
    <input type="text" id="inpSearch" placeholder="Search.." />
</div>
<div>
    <div class="wrapper">
        <h1>Question 1</h1>
        <p>Harry Markus Upload</p>
    </div>
</div>
<div>
    <div class="wrapper">
        <h1>Question 2</h1>
        <p>Registration Append August Download</p>
    </div>
</div>
<div>
    <div class="wrapper">
        <h1>Question 3</h1>
        <p>Login July Dad</p>
    </div>
</div>


$('#inpSearch').keyup(function(){
    var sSearch = this.value;
    $('section#content > div:not(:first-child)').hide();
    $('section#content > div:contains("' + sSearch + '"):not(:first-child)').show();
});
4

2 に答える 2

2

ここで 2 つの問題があります。

  1. 大文字と小文字を区別しない jQuery :contains セレクターを使用する必要があります。upload例:またはを検索すると、Upload結果が取得されます。

コード：

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

ソース:大文字と小文字を区別しない jQuery :contains セレクターはありますか?

2.検索文字列を分割し、次の.eachように解析します。

コード：

    $('#inpSearch').keyup(function(){
    var sSearch = this.value;
    sSearch = sSearch.split(" ");
    $('section#content > div:not(:first-child)').hide();
    $.each(sSearch, function(i){
    $('section#content > div:contains("' + sSearch[i] + '"):not(:first-child)').show();
    });
});

DEMO FIDDLE

于 2013-09-18T14:21:20.217 に答える
1

これを試して

    $('#content div').not("#search-block").hide();
$('#inpSearch').on('keyup',function(){
    $('#content div').not("#search-block").hide();
    var val = this.value;
    val = val.split(" ");
    var contains="";
    for(var i = 0; i < val.length;i++){
        contains.length >0?contains+=",div":"";
        contains+=":contains('"+val[i]+"')";
    }
    $('#content div'+contains).show();
});

デモ

大文字と小文字を区別するには、これを見てください

于 2013-09-18T14:07:48.903 に答える