Question

好的，快速提问！

如果您在搜索框中输入橙色或苹果，您会看到它隐藏了不存在的那个。

完美无缺。

我想要做的是，如果我点击例如橙色，我希望它填充该搜索框，然后在自然键入橙色时执行它的操作..

现在点击橙色将填充搜索框，但它不会使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>

JQUERY

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

jquery搜索框，单击预填充搜索字段的链接将无法正常工作

1 个答案: