Question

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

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

＆＃13;

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

＆＃13;

＆＃13; 我想我已经完成了javascript部分的错误。如果有人可以帮助创建一个小提琴演示，告诉我如何解决这个任务。我不是很擅长javascript，但我正在学习。如果有人能提供帮助我感激不尽

＆＃13;

$("#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;

＆＃13;

Answer 1

您的JSON无效。这可能是您遇到问题的原因。有不同的网站可以在线解析您的JSON。例如JSON Editor Online。我已经为你解决了这个问题：

const char *geng = "A";

我还添加了Plunkr基本搜索功能。你应该能够自己填写其余部分。这只是一种形式：

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

}

然后加载你的JSON并循环遍历结果的JavaScript：

<!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>

<强>更新

新plunkr，其中包含复选框：

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

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

1 个答案: