0

データベースのバックエンドを作成せずに、html / css ページに検索ボックスを作成することは可能ですか? . キーワードが検索されたときに、そのキーワードを含まない他の div ボックスを非表示にして、含むものだけを表示する検索ボックスを作成することは可能ですか。

jquery の .hide / .show /.toggle については知っていますが、そのような機能を実行する単純な検索ボックスをどのようにコーディングし始めるのでしょうか? アイデアや一般的な方向性はありますか?

4

4 に答える 4

3 
$("#search").on("keyup", function() {
    var key = this.value;
    $(".tosearch").each(function() {
       var $this = $(this);
       $this.toggle($(this).text().indexOf(key) >= 0);
    });
});

デモ: http://jsfiddle.net/upsgk/

これにより、大文字と小文字が区別される検索が実行されることに注意してください。大文字と小文字を無視するには、 toLowerCase()を数回呼び出す必要があります。例http://jsfiddle.net/upsgk/1/

于 2012-09-13T15:19:47.507 に答える
1

必要な主要コンポーネントのリストは次のとおりです。

  • inputtxt.value(jQuery: $("input").val()): text 内に書かれた値を返しますinput。
  • elm.innerHTML(jQuery: $("elm").html()): 要素の内容を含む文字列を返します。
  • str.indexOf(pattern)pattern: inが最初に出現したインデックスを返しますstr。patternに存在しない場合は、str-1 を.indexOf()返します。

これらをまとめると、次のようなものが得られます: little link . コードは一目瞭然ですが、JavaScript 部分のコメント付きバージョンを次に示します。

$("#search").on("keydown keyup keypress change", function() { //when the textbox is changed
    var query = $("#search").val(); //save its content
    $(".box").each(function() { //for each box
        var cur = $(this); //get the current box
        if(cur.html().indexOf(query) == -1) { //see if the current box contains the query
            cur.hide("fast"); //it doesn't; hide it
        }
        else {
            cur.show("fast"); //it does, show it
        }
    });
});
于 2012-09-13T15:11:08.983 に答える
0

私はあなたのためにプロジェクトをやりたくありませんが、ここから始めるべきアイデアがあります

var query= $('#search').val();
var str = $('#div1').val();

if (str.indexOf(query) >= 0){
   // display box
}
else{
  // hide box
}
于 2012-09-13T15:06:57.970 に答える
0

はい、可能です。

  1. 最初に検索ボックスを聞いて、デフォルトを使用しないようにします

    $('input[type="submit"]').click(function(e){e.preventDefault();});

  2. コードをプログラムして、検索ボックスの値を取得します。

  3. すべての div を非表示$("div").css("display","none");

  4. ID を持つすべての div を表示します$("#"+valueOfBox").css("display","true");
于 2012-09-13T15:07:27.783 に答える