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의 값은 페이지로드시 한 번만 설정됩니다. 원하는 결과를 얻으려면 입력 할 때마다 최신 값을 얻기 위해 모든 체크 또는 모든 키 입력 전에 regex를 업데이트해야합니다.

다음 코드로 시도 :

$(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 개체에 이벤트를 추가합니다.