使用json数组进行jquery搜索_Jquery_Html_Json

使用json数组进行jquery搜索

jquery html json

使用json数组进行jquery搜索,jquery,html,json,Jquery,Html,Json,我有以下jquery函数，它应该是一个简单的搜索。它不起作用。有人能告诉我它出了什么问题以及如何修复它吗 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var a =[ {"name":"mynewname", "id" : "t2", "location

我有以下jquery函数，它应该是一个简单的搜索。它不起作用。有人能告诉我它出了什么问题以及如何修复它吗

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var a  =[
        {"name":"mynewname", "id" : "t2", "location" : "India"},
        {"name":"mynewname1", "id" : "t21", "location" : "China"},    
    ];

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>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="boot/js/bootstrap.min.js"></script>

</body>
</html>


变量a=[
{“name”：“mynewname”，“id”：“t2”，“location”：“India”}，
{“姓名”：“mynewname1”，“id”：“t21”，“地点”：“中国”}，
];
jQuery（“#搜索json提交”）。单击（函数（）{
jQuery（“#搜索输出”）.html（“”）；
var search_query=jQuery（'#search json input'）.val（）；
var search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
每个（a，函数（k，v）{
if（v['name'].match（搜索\查询\正则表达式）||
v['id'].match（搜索\查询\正则表达式）||
v['location'].匹配（搜索\查询\正则表达式））{
jQuery（“#搜索输出”）.append（“在以下位置找到的搜索结果：”+”{name:“+v['name']+”，id:“+v['id']+”，location:“+v['location']+”}”；
}
});
});
搜索结果

我不知道是什么地方出了问题，为什么它不起作用。请帮忙

编辑

我照你说的做了，这是剧本现在的样子

<script>

var a  =[
{"name":"mynewname", "id" : "t2", "location" : "India"},
{"name":"mynewname1", "id" : "t21", "location" : "China"},    
];
$(document).ready(function() { 
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>


变量a=[
{“name”：“mynewname”，“id”：“t2”，“location”：“India”}，
{“姓名”：“mynewname1”，“id”：“t21”，“地点”：“中国”}，
];
$（文档）.ready（函数（）{
jQuery（“#搜索json提交”）。单击（函数（）{
jQuery（“#搜索输出”）.html（“”）；
var search_query=jQuery（'#search json input'）.val（）；
var search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
每个（a，函数（k，v）{
if（v['name'].match（搜索\查询\正则表达式）||
v['id'].match（搜索\查询\正则表达式）||
v['location'].匹配（搜索\查询\正则表达式））{
jQuery（“#搜索输出”）.append（“在以下位置找到的搜索结果：”+”{name:“+v['name']+”，id:“+v['id']+”，location:“+v['location']+”}”；
}
});
});
});

仍然不起作用

在

$（document.ready（function（）{}）中绑定DOM处理程序块。这确保在尝试绑定处理程序之前已创建DOM
$(document).ready(function() {
    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>');
            }
        });
    });
});

$（文档）.ready（函数（）{
jQuery（“#搜索json提交”）。单击（函数（）{
jQuery（“#搜索输出”）.html（“”）；
var search_query=jQuery（'#search json input'）.val（）；
var search\u query\u regex=new RegExp（“.*”+search\u query+“*”，“g”）；
每个（a，函数（k，v）{
if（v['name'].match（搜索\查询\正则表达式）||
v['id'].match（搜索\查询\正则表达式）||
v['location'].匹配（搜索\查询\正则表达式））{
jQuery（“#搜索输出”）.append（“在以下位置找到的搜索结果：”+”{name:“+v['name']+”，id:“+v['id']+”，location:“+v['location']+”}”；
}
});
});
});

或者，您可以将javascript代码放在结束body标记之前，该标记可以有效地执行相同的操作
另外--删除此行：
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>



您已经在页面顶部包含了JQuery，无需再次加载它
您需要将dom绑定放在$（document.ready（function（）{}）中另外，不要多次链接到jquery源文件。你能给我举个例子吗？我不知道怎么做。抱歉，请确保删除包含的重复jquery库，我更新了脚本。我照你说的做了，还是没有working@LahiruTjay如果是这样的话，那么脚本中的其他地方就有问题了。如果您看看我创建的JSFIDLE（基于您的代码），一切正常。您的javascript控制台中有任何错误吗-