使用javascript从JSON文件搜索并从本地存储加载

Question

我目前正在做一个搜索页面，该页面要求用户使用带有复选框和提交按钮的html5表单进行搜索，以搜索文件。 我已经完成了json文件，但我不知道如何开始搜索JSON文件并从用户选择正确的复选框或单选按钮返回匹配项的JavaScript文件。

到目前为止，我已经制作了Json文件。 因此，如果有人可以帮助我开发javascript（数组），我认为可以搜索Json数据。

 { "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_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. "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" } 

我认为我的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编辑器 。 我已经为您修复了：

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

然后加载您的JSON并遍历结果的JavaScript：

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