Question

我有一个HTML文件，它使用我在网上找到的一些JScript，并希望将其合并到一个内部使用的简单页面中，以便快速查找信息。

该页面将显示存储在服务器上的JSON文件中的数据。

我可以将JSON数据直接添加到HTML文件中，但是想要一个我们可以随时使用新数据导出的文件，现在必须直接手动编辑HTML文件。

到目前为止，我有这个HTML文件：

<body>8192</body>

我的JSON文件是以下文本：

<html>
<head>
<script type='text/javascript'>//<![CDATA[
$(function(){
var a = ['https://url.com/data.json'];

jQuery('#search-json-submit').click(function() {
    jQuery('#search-output').html('');
    var search_query = jQuery('#search-json-input').val();
    var search_query_regex = new RegExp(".*"+search_query+".*", "g");
    jQuery.each(a, function(k, v) {
        if(v['name'].match(search_query_regex) ||
           v['id'].match(search_query_regex) ||
           v['location'].match(search_query_regex)) {
               jQuery('#search-output').append('<li>Search results found in: '+'{ name: "'+v['name']+'", id: "'+v['id']+'", location: "'+v['location']+'" } </li>');
        }
    });
});

});//]]> 

</script>

</head>
<body>
  <input type="text" id="search-json-input" />
<input type="button" id="search-json-submit" value="search" />
<h4>Search Results</h4>
<ol id="search-output">

</ol>

</body>
</html>

我不确定将变量{"name":"mynewname", "id" : "t2", "location" : "India"}, {"name":"mynewname1", "id" : "t21", "location" : "China"},链接到要搜索的JSON文件URL我做错了什么。

我查看了另一个页面，并使用

链接了JSON文件

但我无法做到这一点。

此示例的原始$.getJSON('https://url.com/data.json')变量为：

一旦我使搜索功能起作用，我就可以正确地格式化它并从长远来看找到更合适的解决方案。现在我想开始这个并开始运行。

Answer 1

尝试

$(function () {
    jQuery.getJSON("data.json", function (a) {
        jQuery('#search-json-submit').click(function () {
            jQuery('#search-output').html('');
            var search_query = jQuery('#search-json-input').val();
            var search_query_regex = new RegExp(".*" + search_query + ".*", "g");
            jQuery.each(a, function (k, v) {
                if (v['name'].match(search_query_regex) || v['id'].match(search_query_regex) || v['location'].match(search_query_regex)) {
                    jQuery('#search-output').append('<li>Search results found in: ' + '{ name: "' + v['name'] + '", id: "' + v['id'] + '", location: "' + v['location'] + '" } </li>');
                }
            });
        })
    });
});

确保data.json与js / html（交叉原始策略）位于同一服务器（域）上。

更新：http://jsfiddle.net/m7jocxwh/1/

HTML搜索功能使用JScript（JQuery）和JSON

1 个答案: