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

Question

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

到目前为止我制作的 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 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>

然后是加载 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);
            }); 
        });
      });