JSON 数据的搜索框

Question

I created this code to search through my JSON data but I haven't a clue why it doesn't work.我创建了这段代码来搜索我的 JSON 数据，但我不知道它为什么不起作用。 Could anyone please analyse it?请问有人能分析一下吗？

I basically need a HTML search box to search through corresponding JSON data and return it.我基本上需要一个 HTML 搜索框来搜索相应的 JSON 数据并返回它。

 <script> $('#txt-search').keyup(function(){ var searchField; $.getJSON('example.json', function(data) { searchField = data.val(); }); if(searchField === '') { $('#filter-records').html(''); return; } var regex = new RegExp(searchField, "i"); var output = '<div class="row">'; var count = 1; $.each(data, function(key, val){ if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) { output += '<div class="col-md-6 well">'; output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>'; output += '<div class="col-md-7">'; output += '<h5>' + val.employee_name + '</h5>'; output += '<p>' + val.employee_salary + '</p>' output += '</div>'; output += '</div>'; if(count%2 == 0){ output += '</div><div class="row">' } count++; } }); output += '</div>'; $('#filter-records').html(output); }); </script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Request JSON Test</title> </head> <body> <div class="container" style="padding:50px 250px;"> <form role="form"> <div class="form-group"> <input type="input" class="form-control input-lg" id="txt-search" placeholder="Type your search character"> </div> </form> <div id="filter-records"></div> </div> </body> </html>

Answer 1

You need to parse parameters in you regex function.您需要在正则表达式函数中解析参数。 Here is an example that I builded and you can get an idea:这是我构建的一个示例，您可以得到一个想法：

 var data = [ { "id":198, "name":"Aaron Garo", }, { "id":345, "name":"Michael Stines", }, { "id":545, "name":"Ully Heiz", }, { "id":678, "name":"Asgaf Torino", } ] output = ""; $.each(data, function(key, val){ output += "<div class='values'>"; output += '<h5 class="value-id">' + val.id + '</h5>'; output += '<p class="value-name">' + val.name + '</p>' output += "</div>"; }); $('#content').html(output); /* SEEKER FUNCTION */ if (!RegExp.escape) { RegExp.escape = function (s) { return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") }; } jQuery(function(){ var $rows = $('.values'); $('#seeker').keyup(function () { var regex = new RegExp(RegExp.escape($.trim(this.value).replace(/\s+/g, ' ')), 'i') $rows.hide().filter(function () { var text = $(this).children(".value-name").text().replace(/\s+/g, ' '); return regex.test(text) }).show(); }); });

 .values{ background: #FFFFAA; } .search-bar input{ width: 100%; }

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <div class="search-bar"> <input type="text" id="seeker"> </div> <div id="content"></div>

JSON 数据的搜索框

问题描述

1 个解决方案

解决方案1
0 2017-11-10 14:56:39

JSON 数据的搜索框

问题描述

1 个解决方案

解决方案1 0 2017-11-10 14:56:39

解决方案1
0 2017-11-10 14:56:39