Question

我正在尝试进行搜索，起初我从json文件获取数据而不是搜索，但问题是json文件已成功加载但搜索不起作用我找不到错误我如果（key.search（myExp）！= -1）认为这行代码有问题 js文件：

$(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文件：

{
    "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 1

fieldVal和myExp的值仅在页面加载时设置一次。对于所需的输出，您需要在每次检查之前或每个键盘上更新正则表达式，以获得输入中键入的最新值。

尝试使用以下代码：

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

Answer 2

在没有进入实际搜索代码的情况下，我注意到在添加onkeyup事件时你引用了一个未定义的对象。您的DOM元素位于searchField对象上，但您将事件添加到不存在的（在提供的上下文中）search对象中。

如何使用javascript和ajax进行搜索

2 个答案: