Tips on creating a search feature with JavaScript and AJAX

Question

Tips on creating a search feature with JavaScript and AJAX

I'm currently facing an issue with my search functionality. I have successfully loaded data from a JSON file, but the search feature is not working as expected. I've reviewed my code multiple times and can't identify any mistakes. I believe there might be an error in the following line of code: if (key.search(myExp) != -1)

$(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" }
        ]
}

javascript json ajax

Answer 1

Answer №1

The variables fieldVal and myExp are initially assigned values when the page loads. To achieve the desired output, you must update the regular expression before each comparison or on every keyup event to capture the most recent input value.

Here is the suggested code snippet:

$(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 *****/
                // Update the regex with the latest input 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();
    };
});

Answer 2

The variables fieldVal and myExp are initially assigned values when the page loads. To achieve the desired output, you must update the regular expression before each comparison or on every keyup event to capture the most recent input value.

Here is the suggested code snippet:

$(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 *****/
                // Update the regex with the latest input 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();
    };
});

Answer 3

Answer №2

After reviewing the search code, it appears that there is an issue with referencing an undefined object when implementing the onkeyup event. The DOM element is associated with the searchField object, however, the event is being added to a non-existent search object within the given context.

Answer 4

After reviewing the search code, it appears that there is an issue with referencing an undefined object when implementing the onkeyup event. The DOM element is associated with the searchField object, however, the event is being added to a non-existent search object within the given context.

Tips on creating a search feature with JavaScript and AJAX

Answer №1

Answer №2

Similar questions

The operation to set a nickname in Discord.js was unsuccessful due to insufficient permissions

Configuring attributes, handling click events, and ensuring compatibility across all web

Integrating CSS with Material-UI in a React project: A step-by-step guide

What is the process for dynamically incorporating JavaScript files during compilation to serve as input for browserify?

Displaying a page using express.Router()

Attempting to transform my JSON data into a string, only to encounter the frustrating result of "[object Object]

Secure your messages with PHP encryption and decrypt them with JavaScript

jQuery can be used to obtain the label for a checkbox with a particular value

When using `JSON.stringify`, the resulting data may vary from the original object

Issues with NodeJS's "readline" module causing prompts not to be displayed

Error in Android code: java.lang.NullPointerException - lock is null

Guide on how to send a call to a PHP page using a script

Enhancing Sharepoint Webpart with AJAX Capabilities

What steps can be taken to confirm the accuracy of input before sending it

The HttpMessageNotWritableException is throwing an error in the Corda framework

All shadows in the THREE.js scene are perfectly aligned

The use of WebSockets in conjunction with text encoding techniques

Implementing jquery document.ready() with <img onload> event

JavaScript Array Objects

What is the most suitable Vue.js component lifecycle for data retrieval?