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

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

到目前为止我制作的Json文件。因此，如果有人能帮我开发一个javascript（数组），我想可以搜索Json数据

{
“选择”：[
{
“id”：“choices1”，
“地点”：“孟买”，
“名称”：“拉斯瓦加斯”，
“地点”：“印度”，
“评级”：“4”，
“活动”：[“唱歌”、“跳舞”、“游泳”]，
“价格”：1000美元，
“简短描述”：“知识产权是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
“图片”：“images/pic1small.jpg”，
“长描述”：“Lorem ipsum door sit amet，concetetur adivising elite.Duis feugia erat sit amet pharetra interdum.Duis dictum lacus massa，sit amet malesuada neque malesuada quis.Fusce interdum elit，sit amet consequeat diam faucibus.Aliquam scelerisque null vel commodo auctor。
“url”：“clubnight.html”
},
{
“id”：“choices2”，
“地点”：“伦敦”，
“名称”：“Las momo”，
“地点”：“英国”，
“评级”：“5”，
“活动”：[“比赛”、“攀岩”、“游泳”]，
“价格”：1000美元，
“简短描述”：“知识产权是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
“图片”：“images/pic1small.jpg”，
“长描述”：“Lorem ipsum door sit amet，concetetur adivising elite.Duis feugia erat sit amet pharetra interdum.Duis dictum lacus massa，sit amet malesuada neque malesuada quis.Fusce interdum elit，sit amet consequeat diam faucibus.Aliquam scelerisque null vel commodo auctor。
“url”：“clubnight2.html”
}
{
“id”：“choices3”，
“地点”：“巴黎”，
“名称”：“las ham”，
“地点”：“法国”，
“评级”：“3”，
“活动”：[“足球”、“舞蹈”、“板球”]，
“价格”：1500美元，
“简短的描述，我的同僚们坐在我的位子上，我的同僚们坐在我的位子上，我的同僚们坐在我的位子上，我的同僚们坐在我的位子上，我的同僚们坐在我的位子上，我的同僚们坐在我的位子上，我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我，
“长描述”：“Lorem ipsum door sit amet，concetetur adivising elite.Duis feugia erat sit amet pharetra interdum.Duis dictum lacus massa，sit amet malesuada neque malesuada quis.Fusce interdum elit，sit amet consequeat diam faucibus.Aliquam scelerisque null vel commodo auctor。
“url”：“clubnight3.html”
}

您的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"
        }
]

}

我还添加了一个带有基本搜索功能的。您应该可以自己填写其余部分。它只是一个表单：

<!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);
              }
            }); 
        });
      });

$（窗口）.load（函数（）{
$（“#搜索”）.keyup（函数（）{
//获取类型值
var searchField=$（'#search'）.val（）；
//加载JSON文件
$.getJSON（'data.json'，函数（数据）{
对于（var i=0；i

更新

新选项，包括复选框：

// 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);
            }); 
        });
      });

//代码在这里
$（窗口）。加载（函数（）{
$（“#搜索”）.keyup（函数（）{
//获取类型值
var searchField=$（'#search'）.val（）；
//加载JSON文件
$.getJSON（'data.json'，函数（数据）{
var html=''
对于（var i=0；i-1）{
html+=''+item.location+'
'；
}
}
html+=''；
$（'#result'）.html（html）；
}); 
});
});

感谢您的回复，不过我想说的是，它是否将信息存储在本地存储中。因为您使用了jquery和服务器？您将如何在搜索表单上实现一个简单的复选框或单选按钮，例如：地点：印度、英国、法国，您选择一个，它将搜索json文件。我将尝试并发布我的版本，您可以吗检查是否正确。谢谢。我已经创建了你在更新我的答案时所要求的内容。你应该可以从这里开始。我问你为什么使用jquery？其次，我试图理解你为什么在html部分也使用数据服务器。我使用jquery从文件中获取JSON，并将我在JavaScript中创建的html添加到DOM中。这是不使用jQuery也可以做到，但是使用jQuery更容易。我不知道你的意思