從JSON文件使用JavaScript進行搜索並從本地存儲裝載

Question

我目前正在做一個搜索頁面，要求用戶使用html5表單進行搜索並使用複選框和提交按鈕來搜索文件。我已經完成了json文件，但我不知道如何開始一個JavaScript文件來搜索Json文件並從用戶選擇正確的複選框或單選按鈕返回匹配。

Json文件到目前爲止，所以，如果任何人都可以幫助我開發一個JavaScript（數組），我認爲要搜索Json數據。

{ 
 
\t "choices": [ 
 
     { 
 
      "id":"choices1", 
 
\t \t \t "location":"Mumbai", 
 
\t \t \t "name":"Las vagas", 
 
      \t \t \t "location":"India", 
 
      \t \t \t "Rating": "4", 
 
      \t \t \t "events":["singing", "dancing","swimming"], 
 
\t \t \t "price":1000, 
 
\t \t \t "short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. 
 
\t \t \t "picture":"images/pic1small.jpg", 
 
\t \t \t "long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. 
 
\t \t \t "url":"clubnight.html" 
 
     }, 
 
{ 
 
      "id":"choices2", 
 
\t \t \t "location":"london", 
 
\t \t \t "name":"Las momo", 
 
      \t \t \t "location":"Uk", 
 
      \t \t \t "Rating": "5", 
 
      \t \t \t "events":["racing", "climbing","swimming"], 
 
\t \t \t "price":1000, 
 
\t \t \t "short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. 
 
\t \t \t "picture":"images/pic1small.jpg", 
 
\t \t \t "long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. 
 
\t \t \t "url":"clubnight2.html" 
 
     } 
 

 
\t \t { 
 
\t \t \t "id":"choices3", 
 
\t \t "location":"paris", 
 
\t \t \t "name":"las ham", 
 
      \t \t \t "location":"France", 
 
      \t \t \t "Rating": "3", 
 
      \t \t \t "events":["football", "dancing","cricket"], 
 
\t \t \t "price":1500, 
 
\t \t \t "short_descriptionLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. \t \t \t "picture":"images/pic2small.jpg", 
 
\t \t \t "long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. 
 
\t \t \t "url":" clubnight3.html" 
 
\t \t }

我覺得我已經做了JavaScript的部分錯誤。如果有人可以幫助創建一個小提琴演示，告訴我如何解決這個任務。我不擅長JavaScript，但我正在學習。我很感激，如果有人可以幫助

$("#search").on("click", function() { 
 
    var choiceslocation = $("input[location=’location’]:checked").val(); 
 
    var eventsSearch = $("input[event='events']:checked").map(function() { 
 
     return this.value; 
 
     }) 
 
     .get(); 
 
    var needToEqual = eventsSearch.length;

Answer 1

你JSON是無效的。這可能是你遇到問題的原因。有不同的網站可以在線解析您的JSON。例如，JSON Editor Online。我有固定它你：

{ 
    "choices": [ 
     { 
      "id":"choices1", 
      "location":"Mumbai", 
      "name":"Las vagas", 
     "location":"India", 
     "Rating": "4", 
     "events":["singing", "dancing","swimming"], 
      "price":1000, 
      "short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.", 
      "picture":"images/pic1small.jpg", 
      "long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.", 
      "url":"clubnight.html" 
     }, 
{ 
      "id":"choices2", 
      "location":"london", 
      "name":"Las momo", 
         "location":"Uk", 
         "Rating": "5", 
         "events":["racing", "climbing","swimming"], 
      "price":1000, 
      "short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.", 
      "picture":"images/pic1small.jpg", 
      "long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.", 
      "url":"clubnight2.html" 
     }, 

     { 
      "id":"choices3", 
     "location":"paris", 
      "name":"las ham", 
         "location":"France", 
         "Rating": "3", 
         "events":["football", "dancing","cricket"], 
      "price":1500, 
      "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.", 
      "picture":"images/pic2small.jpg", 
      "long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.", 
      "url": "clubnight3.html" 
     } 
] 

} 

我也還是增加了一個Plunkr與基本的搜索功能。你應該可以自己填寫剩下的。這僅僅是一個形式：

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <form role="form"> 
      <div> 
      <input type="email" id="search" placeholder="Start typing ...."> 
      </div> 
    </form> 
    </body> 

</html> 

然後JavaScript的它加載你的JSON和遍歷結果：

$(window).load(function(){ 
     $('#search').keyup(function() { 

      //Get the type value 
      var searchField = $('#search').val(); 

      // Load the JSON file 
      $.getJSON('data.json', function(data) { 
       for(var i = 0; i < data.choices.length; i++) { 
       var item = data.choices[i]; 

       //Do the check here if the 'searchField' value is part of whatever you want to check against on 'item' 
       console.log(item); 
       } 
      }); 
     }); 
     }); 

更新

新plunkr包括複選框：

// Code goes here 
$(window).load(function(){ 
     $('#search').keyup(function() { 

      //Get the type value 
      var searchField = $('#search').val(); 

      // Load the JSON file 
      $.getJSON('data.json', function(data) { 
       var html = '<div>' 
       for(var i = 0; i < data.choices.length; i++) { 
       var item = data.choices[i]; 

       //Do the check here if the 'searchField' value is part of whatever you want to check against on 'item' 
       if(item.location.indexOf(searchField) > -1) { 
        html += '<input type="checkbox" name="vehicle" value="' + item.location + '"> ' + item.location + ' <br>'; 
       } 
       } 

       html += '</div>'; 
       $('#result').html(html); 
      }); 
     }); 
     });