javascript - getJSON not sending new request as user types -
given following javascript, i'm having issue sending new request when search term changed user. supposed begin searching/displaying results after there more 3 characters entered. makes 1 search after initial term of more 3 characters, not send request after that.
jquery
$("#results-container").hide(); $("#global-search").keyup(function(e) { var q = $("#global-search").val(); if (e.which == 13) { window.location.replace("/search?q=" + q); } //only begin search @ least 3 characters. if (q.length > 3) { $("#results-container").show(); ajax_search(); } //send search query function ajax_search() { $.getjson("//search.url-to-rest-api.com?q=" + q, {}, //get results , make 'em function(data) { console.log(data); // $(".results").append("results <b> " + q + "</b>"); $.each(data.data, function(i, data) { if (data.type === "practice area") { $(".practice-area-results").append("<li class='result-item'><a href=\"" + data.permalink + "\">" + data.title + "</a></li>"); if ($(".practice-area-results").val() == '') { $(".practice-area-results-header, .practice-area-results").empty(); } } }); }); } });
html
<div class="row desktop-search"> <div class="row"> <div class="col-lg-12"> <input type="text" class="form-control" id="global-search" style="width:100%; position: fixed;" placeholder="search..."> </div> <div id="results-container"> <div class="search-results"> <p class="practice-area-results-header">practice area</p> <div class="practice-area-results"></div> </div> </div> </div> </div>
Comments
Post a Comment