Question

目前，我正在创建一个搜索栏。无论如何我抓住输入值，但问题是它并不总是抓住我想要它抓住的东西。让我解释一下。

我遇到问题的地方是我用下拉值更新输入值。之后我会进入代码，但只是在查询中提交文本时，它只会抓取用户输入的内容。因此，如果用户点击下拉值，它将不会提交，它将仅提交用户出于某种原因输入的内容。

代码时间!!!

HTML 的

<input type="text" name="search" class="col-xs-8 col-xs-offset-1 col-sm-5 col-sm-offset-3" id="searchbar" autocomplete="off" value="<?php echo $query; ?>"/>
<button class="glyphicon glyphicon-search glyphicon-non-button col-xs-2 col-sm-1" id="searchbarbutton" input type="submit"> </button>
<div class="col-xs-8 col-xs-offset-1 col-sm-5 col-sm-offset-3" id="postsearchsuggestionholder">
    <div class="postsearchsuggestion col-xs-12" id="postsearchsuggestion1"></div>
</div>

Javascript（也是Jquery）

//Adds the Query to the URL

$("[name='searchform']").change(function() {
        $("[name='searchform']").attr("action", "http://localhost/postin'/categories/<?php echo $category; ?>/" + $("#searchbar").val().trim());
});

//Removes the dropdown
$("#searchbar").keyup(function() {
    if ($("#searchbar").val().length == 0) {
        $("#postsearchsuggestionholder").hide();
        $('#searchbar').css("border-bottom-left-radius","3px");
    }
});

//Dropdown stuff (Autocomplete stuff)
$(function() {
    $("#searchbar").autocomplete({
        source: function(request,response) {
            $.ajax({
                url: "http://localhost/postin'/categories/searchbar.php",
                dataType: "json",
                type: "POST",
                data: { 'keyword': request.term,
                        'category': "<?php echo strtolower($category); ?>" },
                success: function(data) {
                    if (0 in data) {
                        $('#postsearchsuggestionholder').show();
                        $('#searchbar').css("border-bottom-left-radius","0px");
                        $('#postsearchsuggestion1').text(data[0]);
                        $('#postsearchsuggestion1').show();
                    }
                    else {
                        $('#postsearchsuggestion1').hide();
                    }
                    $("#postsearchsuggestion1").click(function() {
                        $('#searchbar').val(data[0]);
                        $('#postsearchsuggestionholder').hide();
                        $('#searchbar').css("border-bottom-left-radius","3px");
                    });
                }
            });
        },
    });
});

如此简单，如果用户输入hel，那么它可能会建议hello，但它仍会搜索hel，而我不是确定为什么。有任何想法吗？谢谢！

EDITED 缩短了代码。

Answer 1

我很确定答案在于val()不会触发change事件。试试这个：（注意第二行已经改变了你的）

...
$("#postsearchsuggestion1").click(function() {
    $('#searchbar').val(data[0]).trigger("change");
    $('#postsearchsuggestionholder').hide();
    $('#searchbar').css("border-bottom-left-radius","3px");
});
...

Answer 2

将自动完成功能中的点击功能移出并使用“开启”。变化：

$("#postsearchsuggestion1").click(function() {
                    $('#searchbar').val(data[0]);
                    $('#postsearchsuggestionholder').hide();
                    $('#searchbar').css("border-bottom-left-radius","3px");
                });

看起来像这样：

$(body).on("#postsearchsuggestion1","click",function(){
                   $('#searchbar').val(data[0]);
                    $('#postsearchsuggestionholder').hide();
                    $('#searchbar').css("border-bottom-left-radius","3px");
 });

我使用了body但你可以设置任何父div被“监视”。这是文档。 http://api.jquery.com/delegate/

Jquery没有抓住最新的输入值

2 个答案: