4

Javascript を使用して iTunes のような検索を作成する旅に出ました。私は jQuery について学び、StackOverflow の人々の助けを借りて成功しました.

ここに戻ってきて、ユーザー入力に基づいて動的な非表示/表示リストを作成する非常に簡単な方法を共有します。

Let's search!

チュートリアル コード全体は、ここにあります。

そして、そのための JSFiddle がここにあります!

4

3 に答える 3

2

ニックがこの実験で成功したのを見るのはとてもうれしい. それを行う方法を学ぶ上で良い仕事:)

この jquery プラグインをまだ使用していない場合は、クイック検索と呼ばれるプラグインも参照してください。

https://github.com/riklomas/quicksearch

そして、私はそれを多くのページで使用しましたが、それは魅力のように機能します. 例: http://fedmich.com/works/types-of-project.htm

于 2012-11-20T03:49:36.493 に答える
2

最初に、div 内にいくつかのテキストを含む単純な Div レイアウトを作成し、その上に検索バーを作成します。

    <div class="search_bar">
      <form><!--The Field from which to gather data-->
        <input id="searchfield" type="text" onclick="value=''" value="Case Sensitive Search">
      </form>
    </div>
    <!--Containers With Text-->
    <div class="container">
      <div class="container_of_hc">
        <div class="horizontal_containers">Cat</div>
        <div class="color">Black</div>
        <div class="color">White</div>
        <div class="color">Orange</div>
      </div>
      <div class="horizontal_containers">Dog</div>
      <div class="horizontal_containers">Rat</div>
      <div class="horizontal_containers">Zebra</div>
      <div class="horizontal_containers">Wolf</div>
    </div>

CSS:

      .container {
        width: 100%;
      }
      .horizontal_containers {
        height:10%;
        border: solid 3px #B30015;
        font-size: 45px;
        text-align: center;
      }

次に、jQuery を使用してスクリプトを作成します。タイトルに、これは動的検索であると書かれていることを思い出してください。これは、(私たちにとって) 入力されたキーごとに検索を更新することを意味します。

$("#searchfield").keyup(function() {

注:セレクターの復習が必要ですか?

次に、変数を #searchfield の値に設定します。

  var str = $("#searchfield").val();  //get current value of id=searchfield

検索フィールドに何もないときにリスト内のすべての div を確実に表示するには、新しい変数 (str) の長さに基づいて if ステートメントを作成します。

  if (str.length == 0) {
    //if searchfield is empty, show all
    $(".horizontal_containers").show();
  }

最後に、str の長さが 0 でない場合、div を実際に非表示にします。

  else {
    //if input contains matching string, show div
    //if input does not contain matching string, hide div
    $("div:contains('" + str + "').horizontal_containers").show();
    $("div:not(:contains('" + str + "')).horizontal_containers").hide();
  }
});

div:contains()anddiv:not(:contains())ステートメントは、条件を設定するものです。基本的にはif文です。div 属性ではなく、div 内に含まれるテキストを検索します。より深い div 構造を検索する場合は、次のようにスクリプトの jQuery ステートメントで複数のセレクターを使用できます。

if (str.length == 0) {
//if searchfield is empty, show all
  $(".container .color").show();
  } else {
    //if input contains matching string, show div
    //if input does not contain matching string, hide div
    $(".container div:contains('" + str + "').color").show();
    $(".container div:not(:contains('" + str + "')).color").hide();
  }

試してみるには、既に必要なスクリプト ステートメントを置き換えます。

注: div のネスト構造は、セレクターのネスト構造と一致する必要があります。

そして、それは本質的にそれです。これを改善するためのヒントがある場合、大文字と小文字を区別しない検索に変更する方法を知っている場合、または他に考えられることがあれば、お知らせください。

MrXenoType のおかげで、:contains 関数の大文字と小文字を区別しないことを学びました。

このプロジェクトの大文字と小文字を区別しない検索を作成するには、次を追加するだけです。

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

これにより、contains 関数の疑似が作成されます。このコードを他のスクリプトの上 (同じスクリプト内) に配置して、このスクリプトのみを true にします。

于 2012-11-20T02:44:18.223 に答える
1

試す：

$.expr[":"].contains_nocase = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

jQuery 1.8 で :contains_nocase() セレクターを追加するため

于 2012-11-20T03:36:53.940 に答える