Question

我对JS和jQuery仍然很陌生，但我想知道如何从JSON文件中搜索和检索一些结果。

我的HTML看起来像这样：

<form name="fetch">
    <input type="text" id="query">
    <input type="submit" id="search" value="Go">
</form>

<section id="main"></section>

我的JS喜欢这个：

$(function() {

$.getJSON('data.json', function(data) {

    var search = $('#query').val();

    var output="<h2>Search results for " + search + "</h2>";

    for (var i in data.places) {
        for (var ind in data.places[i].service[0].type) {
            if (data.places[i].service[0].type[ind].name == search) {
                output+="<h3>" + data.places[i].name + "</h3>";
            } else {}
        };
    };
    document.getElementById("main").innerHTML=output;
});

$('#fetch form').on('submit', data);

});

我将输入字段的值存储在名为search的变量中但是当我git＆＃34; Go＆＃34;它似乎没有给我任何结果。但是，如果我使用JSON对象中的input属性对HTML中的value=""字段进行硬编码，则会返回数据。

我无法解决如何保存搜索变量中输入的内容并使用该功能返回结果。

感谢任何帮助。

提前致谢！

更新：在下面添加了一些JSON数据：

 {
  "places":[
    {
      "name": "The Whittington Hospital",
      "service": [{
        "type": [
          { "name": "Hernia Repair" },
          { "name": "Hip Replacement" },
          { "name": "Crohn's Disease" },
          { "name": "Pregnancy" }
        ]
      }]
      },
      {
      "name": "University College Hospital",
      "service": [{
        "type": [
          { "name": "Hernia Repair" },
          { "name": "Pregnancy" }
        ]
      }]
    }
  ]
}

Answer 1

$('#fetch form').on('submit', data);很可能是错误的（代码中没有名为data的方法）

你可能需要这个

$(function() {

    function performSearch(e){
        e.preventDefault();

        $.getJSON('data.json', function(data) {

            var search = $('#query').val();

            var output="<h2>Search results for " + search + "</h2>";

            for (var i in data.places) {
                for (var ind in data.places[i].service[0].type) {
                    if (data.places[i].service[0].type[ind].name == search) {
                        output+="<h3>" + data.places[i].name + "</h3>";
                    } else {}
                };
            };
            document.getElementById("main").innerHTML=output;
        });
    };

    $('#fetch').on('submit', performSearch);

});

或（，因为您的JSON是静态的，而您执行搜索客户端）

$(function() {
    var data;

    $.getJSON('data.json', function(jsondata) { data = jsondata; });

    function performSearch(e){
        e.preventDefault();

        if (data == undefined) return; // do nothing if json is not yet loaded

        var search = $('#query').val();
        var output="<h2>Search results for " + search + "</h2>";

        for (var i in data.places) {
            for (var ind in data.places[i].service[0].type) {
                if (data.places[i].service[0].type[ind].name == search) {
                    output+="<h3>" + data.places[i].name + "</h3>";
                } else {}
            };
        };
        document.getElementById("main").innerHTML=output;
    };

    $('#fetch').on('submit', performSearch);

});

<强>更新

有几个错误：

$('#fetch form')将表单定位在id="fetch"的元素下。
- 但您使用name代替id，因此处理程序未受约束
- name（应该是id）属性存在于表单本身上，而不是存在于父表单上。

因此您需要将html更改为<form id="fetch">，并使用$('#fetch').on('submit', performSearch);

http://jsfiddle.net/gaby/44wM5/2/

Answer 2

function loadData() {
    $.getJSON('data.json', function(data) {
        window.data = data;
        // Data loaded
    });
}

function search(query) {
    var output="<h2>Search results for " + query + "</h2>";
    for (var i in data.places) { // consider jQuery.each
        for (var ind in data.places[i].service[0].type) {
            if (data.places[i].service[0].type[ind].name == query) {
                output+="<h3>" + data.places[i].name + "</h3>";
            } else {}
        };
    };
    $('#main').html(output);
}

$(document).ready(function() {
    // Choose which data to load propably?
    loadData(); // Load data when you're ready
    // and anything else
});
$('#fetch form').on('submit', function() {
    var query = $('#query').val();
    search(query); // Call search function whenever you want, using any query
});

从JSON数据库中检索结果

2 个答案: