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

Search from JSON File using javascript and loading from local storage

本文关键字：存储加载 javascript JSON 文件使用搜索更新时间：2023-09-26

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

到目前为止，我已经制作了Json文件。因此，如果有人能帮我开发一个javascript（Array），我想可以搜索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;

您的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);
            }); 
        });
      });