Dima Vleskov Dima Vleskov - 3 months ago 11
Javascript Question

how to make search using javascript and ajax

I'm trying to make a search, at first I get data from json file and than searching, but the problem is the json file is successfully loaded but the search doesn't work and i can't find a mistake i think in this line of code something wrong if (key.search(myExp) != -1) here where i test it http://99.sysale.ua/
js file:

$(function() {

var searchField = document.getElementById("search");
var fieldVal = searchField.value;
var myExp = new RegExp(fieldVal, 'i');

search.onkeyup = function() {

var request;
request = new XMLHttpRequest();
request.open("GET", "data.json");

request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var info = JSON.parse(request.responseText);
var output = "";

for (var i = 0; i <= info.links.length; i++) {
for (key in info.links[i]) {
if (info.links[i].hasOwnProperty(key)) {
if (key.search(myExp) != -1) {
output += "<p>" + key + "</p>";
}
}
}
}
var update = document.getElementById("result");
update.innerHTML = output;
}
};
request.send();
};
});


json file:

{
"full_name" : "dima",
"links" : [
{ "blog" : "http://iviewsource.com" },
{ "facebook" : "http://facebook.com/iviewsource" },
{ "podcast" : "http://feeds.feedburner.com/authoredcontent" },
{ "twitter" : "http://twitter.com/planetoftheweb" },
{ "youtube" : "http://www.youtube.com/planetoftheweb" }
]
}

Answer

The value of fieldVal and myExp are being set only once at the time of page load. For your desired output, you will need to update the regex before every check or on every keyup to get the latest value typed in the input.

Try with the following code:

$(function() {
    var searchField = document.getElementById("search");
    var fieldVal = searchField.value;
    var myExp = new RegExp(fieldVal, 'i');

    search.onkeyup = function() {
        var request;
        request = new XMLHttpRequest();
        request.open("GET", "data.json");

        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                var info = JSON.parse(request.responseText);
                var output = "";

                /***** UPDATED CODE *****/
                // get value of searchField to update the regex as per the latest value
                var fieldVal = searchField.value;
                var myExp = new RegExp(fieldVal, 'i');
                /***** UPDATED CODE *****/

                for (var i = 0; i <= info.links.length; i++) {
                    for (key in info.links[i]) {
                        if (info.links[i].hasOwnProperty(key)) {
                            if (key.search(myExp) != -1) {
                                output += "<p>" + key + "</p>";
                            }
                        }
                    }
                }
                var update = document.getElementById("result");
                update.innerHTML = output;
            }
        };
        request.send();
    };
});