0

では早速質問です！

http://jsfiddle.net/UYtz8/

検索ボックスに「 orange 」または「 apple」と入力すると、そうでないものが非表示になっていることがわかります。

それは完璧に機能します。

私がやろうとしているのは、たとえばorangeをクリックすると、その検索ボックスに入力してから、自然にオレンジを入力したときに何をするかということです..

現在、オレンジ色をクリックすると検索ボックスがいっぱいになりますが、jquery は機能しません。

アイデアや助けはありますか？

HTML

Search: <input id = "searchbox" type = "text"/><br/>

<div class="track">
<h1>Section 1</h1>
<h3><a style="cursor:pointer;" onclick="document.getElementById('searchbox').value='orange';">orange</a></h3>
</div>

<div class="track">
<h1>section 2</h1>
<h3><a style="cursor:pointer;" onclick="document.getElementById('searchbox').value='apple';">apple</a></h3>
</div>​

Jクエリ

$("#searchbox").on("keydown keyup keypress change", function() {
var query = this.value.toLowerCase();
$(".track").each(function() {
    var cur = $(this);
    if(cur.text().toLowerCase().indexOf(query) == -1) {
        cur.hide("fast");
    }
    else {
        cur.show("fast");
    }
});

});

4

1 に答える 1

0

onclick イベントが発生したときに検索ロジックを実行していません。検索入力フィールドに値を割り当てるだけです。スクリプトを次のように変更します。

function search(query){
    $(".track").each(function() {
        var cur = $(this);
        if(cur.text().toLowerCase().indexOf(query.toLowerCase()) == -1) {
            cur.hide("fast");
        }
        else {
            cur.show("fast");
        }
    });
}        

$("#searchbox").on("keydown keyup keypress change", function() {
    search($(this).val());
});

$(".track h3 a").on("click", function() {
    search($("#searchbox").val());
});
于 2012-11-06T08:14:19.180 に答える