HTML搜索功能使用JScript (JQuery)和JSON

HTML Search Function Using JScript (JQuery) and JSON

本文关键字：JQuery JSON JScript 搜索 功能 HTML      更新时间：2023-09-26

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

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

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

现在我有了这个HTML文件:

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

我的JSON文件是以下文本:

{"name":"mynewname", "id" : "t2", "location" : "India"},
{"name":"mynewname1", "id" : "t21", "location" : "China"},

我不确定我做错了什么链接变量a到JSON文件URL搜索。

我看了看另一个页面，它使用

链接JSON文件
$.getJSON('https://url.com/data.json')

但是我也不能让它工作。

本例的原始a变量为:

var a  =[
    {"name":"mynewname", "id" : "t2", "location" : "India"},
    {"name":"mynewname1", "id" : "t21", "location" : "China"},    
];

一旦我得到搜索功能的工作，我就可以正确地格式化它，并找到一个更合适的解决方案，从长远来看。现在我想让它启动并运行

Try 

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

确保数据。Json与你的js/html(跨源策略)位于同一服务器(域)。

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

相关文章：