-2

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) 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" }
        ]
}
2
  • What are you trying to achieve here? What should be the output? Sep 4, 2016 at 18:12
  • blog, facebook, twitter but if i press "face" only facebook have to stay visible
    – dmitriy
    Sep 4, 2016 at 18:18

2 Answers 2

1

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();
    };
});
0

Without getting into the actual search code, I noticed you're referencing an undefined object when adding the onkeyup event. Your DOM element is on searchField object, but you add the event to an unexistent (in the provided context) search object.

2
  • should i write something like this if (info.links.search(myExp) != -1) ?
    – dmitriy
    Sep 4, 2016 at 17:50
  • Oddly, search will refer to the DOM element with id="search". This is a strange feature supported by most of the browsers. It is a horrible practice to follow but does work. Sep 4, 2016 at 18:04

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.