I have a piece of code which works with JSON to read values from a file, I got it working to display the results I need when I have a full match and a way that shows all the data all the time, both not what I need. I started the code out with a CSV file, but due the amount of data this was too slow, thus the switch to JSON (see: This question)
The code I have now with the JSON is as follows:
$(document).ready(function() {
var airports; //Prepare variable for storing JSON data
d3.json("airport.json", function(data) {
airports = data; //put the JSON data into an easy to call variable
continueCode(); //This is so we can use the JSON data outside of this call
});
function continueCode(){
var result; //Prepare result variable for usersearches
//User is typing in departure field
$(".input-leave").on("keyup paste", function(){
$("#display").empty();
//Grab user input
var userInput = $(".input-leave").val();
if(userInput != ''){
console.log("User input: "+userInput);
//console.log(airports[0]["Country Code"]);
for(var i=0; i<airports.length; i++){
/* Prepare Variables for checking columns of JSON
cnCode = Country Code
ctCode = City Code
stCode = State Code
apCode = Airport Code
apName = Airport Name
*/
var cnCode = airports[i]["Country Code"],
ctCode = airports[i]["City Code"],
stCode = airports[i]["State Code"],
apCode = airports[i]["Airport Code"],
apName = airports[i]["Airport Name"];
//Check if user input matches one of our variables
//This shows the airports on an exact match
if((userInput.toLowerCase() == cnCode.toLowerCase()) || (userInput.toLowerCase() == ctCode.toLowerCase()) || (userInput.toLowerCase() == stCode.toLowerCase()) || (userInput.toLowerCase() == apCode.toLowerCase()) || (userInput.toLowerCase() == apName.toLowerCase())){
$("#display").append("Country Code: "+cnCode+", City Code: "+ctCode+", State Code: "+stCode+", Airport Code: "+apCode+", Airport Name: "+apName+"<hr>");
}
//This results in every airport being shown at all times
if((userInput.toLowerCase().indexOf(cnCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(ctCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(stCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(apCode.toLowerCase())) !== -1 || (userInput.toLowerCase().indexOf(apName.toLowerCase())) !== -1){
$("#display").append("Country Code: "+cnCode+", City Code: "+ctCode+", State Code: "+stCode+", Airport Code: "+apCode+", Airport Name: "+apName+"<hr>");
}
}
}else{
$("#display").empty();
}
});
}
});
As you can see I have 2 ways of reading the data now, one that shows the data on a full string match and one that display all the data at any string. What I need is for the data to be displayed on a partial string hit (example: user types 'Am', results display everything starting with 'am' in any column).
I have looked around here on SO and on Google, but everything I find is for displaying partial data, where the user sends an input and the result is for example an ID and name, I need to show the data while the user is inserting the data however so that won't work for me, is there a quick and easy way of solving this? I have been unable to find any JSON plugins that could do it for me, I have considered trying it with ElasticSearch, but I'm unsure as to how I should get started on that and if it will do the trick for me.
