Hello,
I've been working on a website for a client for a while now. The website uses a instant search search box, where when a user starts typing characters in a text input, search results are fetched using AJAX and immediately displayed in the same webpage. The
setup work flawlessly in all major browsers except Internet Explorer (at least 9-11, Edge seems excused).
The core code is as follows:
(function($) {
// Tracking variable for AJAX requests
var request = null;
function searchQuery(query){
console.log("Search query received");
request = $.ajax({
method: "get",
url: icl_home + "wp-json/query/v1/search/" + query,
beforeSend : function(){
if(request != null){
// If a request exists already, cancel it
request.abort();
} else{
// Set loading state to signify loading
// This will output a spinner on the object
$("nav .search").addClass("loading");
}
},
success: function(data){
console.log("Query returned");
// On data get, push it to the right function
formatResults(data);
// Reset loading state
$("nav .search").removeClass("loading");
// Reset request
request = null;
}
});
}
$("input#search").keyup(function(e){
console.log("Trigger keyup");
searchQuery($(this).val());
});
})(jQuery); // Fully reference jQuery after this point.
As you can see, the intent is simple. The problem is that Internet Explorer appears to not recognise our keyup handler, and this is imperative to the functioning of the feature. I've tried replacing the handler with keydown / keypress, I've tried singling out jQuery by registering the event with pure javascript, but nothing has worked yet.
Would you have any suggestions as to where we could look for possible problems?