javascriptとajaxを使って検索する方法

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の値は、ページ読み込み時に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 = ""; 

       /***** 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）オブジェクトにイベントを追加します。