如何使用javascript和ajax进行搜索

我正在尝试进行搜索，首先我从json文件中获取数据，然后再进行搜索，但问题是json文件已成功加载，但搜索不起作用，我找不到错误。我认为在这行代码中，如果（key.search（myExp）！=-1）出现错误，则会出现错误 js文件：

---

没有进入实际的搜索代码，我注意到您在添加onkeyup事件时引用了一个未定义的对象。DOM元素位于

searchField

对象上，但将事件添加到一个不存在的

search

对象（在提供的上下文中）

加载页面时，

fieldVal

和

myExp

的值仅设置一次。对于所需的输出，您需要在每次检查之前或在每次keyup上更新正则表达式，以获得输入中键入的最新值

请尝试使用以下代码：

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

$（函数（）{
var searchField=document.getElementById（“搜索”）；
var fieldVal=searchField.value；
var myExp=新的RegExp（fieldVal，'i'）；
search.onkeyup=函数（）{
var请求；
请求=新的XMLHttpRequest（）；
open（“GET”，“data.json”）；
request.onreadystatechange=函数（）{
if（request.readyState==4&&request.status==200）{
var info=JSON.parse（request.responseText）；
var输出=”；
/*****更新代码*****/
//获取searchField的值以根据最新值更新正则表达式
var fieldVal=searchField.value；
var myExp=新的RegExp（fieldVal，'i'）；
/*****更新代码*****/
对于（var i=0；如果（info.links.search（myExp）！=1），我应该这样写吗？奇怪的是，
search
将使用
id=“search”引用DOM元素
。这是一个大多数浏览器都支持的奇怪功能。这是一个可怕的做法，但确实有效。你想在这里实现什么？输出应该是什么？博客、facebook、twitter，但如果我按“脸”，只有facebook必须保持可见
{
    "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" }
        ]
}

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