jquery - jquery搜索框，单击链接以预填充搜索字段将不起作用

Question

好的，快速提问！

http://jsfiddle.net/UYtz8/

如果您在搜索框中输入orange或apple，您会看到它隐藏了它不是的那个。

这完美无缺。

我想要做的是，如果我点击例如orange，我希望它填充该搜索框，然后当你自然地键入 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>​

查询

$("#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");
    }
});

});

Answer 1

触发 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());
});