Jquery不抓取最新的输入值 - Jquery Not Grabbing Newest Input Value

Jquery Not Grabbing Newest Input Value

本文关键字：输入最新抓取 Jquery | 更新日期: 2023-09-27

目前，我正在创建一个搜索栏。不管怎样，我在抓取输入值，但问题是它并不总是抓取我想要它抓取的东西。让我再解释一下。

我遇到问题的地方是当我用下拉值更新输入值时。我将进入代码后，但只是在提交查询中的文本时，它只会抓取什么用户输入。如果用户点击一个下拉值，它不会提交那个值，它只会提交用户输入的值。

代码时间! !

<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，我不确定为什么。什么好主意吗?谢谢你！
缩短代码

我很确定答案在于val()不会触发change事件。试试这个:(注意第二行与你的不同)

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

将点击功能移出自动完成功能并使用"on"。变化:
$("#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为on "watched"。这是医生。http://api.jquery.com/delegate/