Question

我有一个用json文件进行实时搜索结果的表单，所以当我键入例如'a'时，它会显示地址簿中的所有联系人，但如果我键入一个完整的姓氏，例如我键入史密斯它仍然显示所有的联系人而不是以s开头的名字，然后是任何带有史密斯的名字。我怎样才能过滤这些结果？如果有人能帮助我，那将是一个巨大的帮助。

编辑：示例中的address.json示例（格式正确）

[{
    "first_name": "Barbara",
    "last_name": "Adams",
    "Picture": "robohash.org/…; ",
    "phone": "7 - (263) 660 - 4073 ",
    "address": "878 Schurz Hill "
}, {
    "first_name": "Ashley",
    "last_name": "Bowman",
    "Picture": "robohash.org",
    "phone": "1 - (512) 301 - 8791 ",
    "address": "54 Ruskin Point "
}]

HTML内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Index</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <form>
        <div class="form-group">
          <input type="email" class="form-control input-lg" id="search" placeholder="type to search ....">
        </div>
        <div id="results"> </div>
</form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script> -->
    <script>
    $(window).load(function(){
        $('#search').keyup(function(){
            var searchField = $('#search').val();
            var output = '<div class="row">';
            var count = 1;
            $.getJSON('address.json', function(data) {
                    console.log(data);

              $.each(data, function(key, val){


                  output += '<div class="col-md-6 well">';
                  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.picture+'" alt="'+ val.first_name +'" /></div>';
                  output += '<div class="col-md-7">';
                  output += '<h5>' + val.first_name + '</h5>';
                  output += '<h4>' + val.last_name + '</h4>'
                  output += '</div>';
                  output += '</div>';
              });
              output += '</div>';
              $('#results').html(output);
            }); 
        });
      });


    </script>
  </body>
</html>

Answer 1

鉴于您对过滤感兴趣，最明显的解决方案通过UI将使用Regular expressions。
但是，使用regular expressions的方法不止一种完全取决于你的要求。

这是一个开始

我使用的是最小代码段，因此我删除了大部分未使用的代码。
聆听输入字段的更改事件。
按此处对象的first_name搜索

＆＃13;

var sampleJson = [{
  "first_name": "Barbara",
  "last_name": "Adams",
  "Picture": "robohash.org/…; ",
  "phone": "7 - (263) 660 - 4073 ",
  "address": "878 Schurz Hill "
}, {
  "first_name": "Ashley",
  "last_name": "Bowman",
  "Picture": "robohash.org",
  "phone": "1 - (512) 301 - 8791 ",
  "address": "54 Ruskin Point "
}];

function filterAddress(filterResult) {
  output = '';
  $.each(filterResult, function(key, val) {    
    output += '<div>';
    output += '<h5>' + val.first_name + "&nbsp" + val.last_name + '</h5>';
    output += '<h4>' + '</h4>'
    output += '</div>';
  });  
  output += '</div>';
  $('#results').html(output);
}

$(document).ready(function() {
//load your JSON just once as we are going to iterate over the same JSON as per your comments. No need to load it more than once as you are only searching through this array.
  $('#search').on('change', function(e) {
    filterAddress(executeSearch($('#search').val()));
  });
});

function executeSearch(queryStr) {
  var results = [];
  if (queryStr === null || queryStr == "") {
    return results;
  }
  var pattern = new RegExp('^' + queryStr, 'i');
  $.each(sampleJson, function(key, val) {
    if (pattern.test(val.first_name)) {
      results.push(val);
    }
  });
  return results;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">
<br>
<div id="results">Results Appear here</div>

＆＃13;

ajax json实时搜索不会过滤结果

1 个答案: