jquery search with json array

У меня есть следующая функция jquery, которая должна быть простым поиском. Это не работает. Может кто-то сказать, что с ним не так, и как это исправить.jquery search with json array

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

Я не могу понять, что не так, и почему он не работает. пожалуйста, помогите

EDIT

Я сделал, как у сказал, вот то, что сценарий выглядеть как сейчас,

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

все еще не работает

источник

2014-11-15 Lahiru Tjay

Вы должны положить Dóm привязок внутри ' $ (document) .ready (function() {}); ' –

Кроме того, не связывайтесь с исходным файлом jquery более одного раза. – hjpotter92

Можете ли вы привести мне пример? м не знаю как. извините –

Bind обработчиков DOM внутри $(document).ready(function() {}); блок. Это гарантирует создание 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>'); 
      } 
     }); 
    }); 
});

В качестве альтернативы вы можете поместить свой код яваскрипта только перед темзакрытия тела тег, который эффективно делает то же самое.

Также - удалить эту строку:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script>

Вы уже в том числе JQuery в верхней части страницы, нет необходимости, чтобы загрузить его снова

источник

2014-11-15 16:23:30

Я сделал это еще не работает :( –

Удостоверьтесь, что вы избавились от дублирующей библиотеки jquery, в которую вы входите –

Просто попробовал, и он работает: http://jsfiddle.net/a18a7s6b/ –

jquery search with json array

ответ

Смежные вопросы