javascript - Jquery Not Grabbing Newest Input Value -
currently, creating search bar. anyhow grabbing input value, problem is not grabbing want grab. let me explain more.
the place run issues when update input value dropdown value. code after, when submitting text in query grab user inputted. if user clicks on dropdown value, not submit that, submit user entered reason.
code time!!!
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 too)
//adds query url $("[name='searchform']").change(function() { $("[name='searchform']").attr("action", "http://localhost/postin'/categories/<?php echo $category; ?>/" + $("#searchbar").val().trim()); }); //removes 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"); }); } }); }, }); });
so simply, if user types in hel
might instance suggest hello
, still search hel
, , not sure why. ideas? thank you!
edited shortened down code.
i'm pretty sure answer lies in fact val()
doesn't trigger change
event. try this: (note second line has changed yours)
... $("#postsearchsuggestion1").click(function() { $('#searchbar').val(data[0]).trigger("change"); $('#postsearchsuggestionholder').hide(); $('#searchbar').css("border-bottom-left-radius","3px"); }); ...
Comments
Post a Comment