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

时间：2022-08-22 10:24:15

I have an form thatdoes a live search with results with a json file so when i type in for example 'a' it brings up all the contacts in the address book but if I type a full last name for example if I type s-m-i-t-h it still shows all the contacts instead of the names that begins with s and then any name with smith in it. How would I be able filter these results? If anyone can help me it would a massive help.

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

EDIT: Sample address.json as mentioned in comments (properly formatted)

编辑：注释中提到的示例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 Content:

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>

1 个解决方案

#1

0  

  • The most obvious solution given that you are interested in filtering through UI would be to use Regular expressions.
  • 鉴于您对通过UI过滤感兴趣，最明显的解决方案是使用正则表达式。
  • There is more than one way to use regular expressions though, it totally depends on your requirements.
  • 但是，使用正则表达式的方法不止一种，完全取决于您的要求。

Here is a start

这是一个开始

  • I'm using a minimal snippet, so I've removed most of the unused code.
  • 我正在使用最小的代码段，因此我删除了大部分未使用的代码。
  • Listening to change event of input field.
  • 听取输入字段的更改事件。
  • Searching by first_name of the object here
  • 在此处按对象的first_name搜索

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

#1

0  

  • The most obvious solution given that you are interested in filtering through UI would be to use Regular expressions.
  • 鉴于您对通过UI过滤感兴趣，最明显的解决方案是使用正则表达式。
  • There is more than one way to use regular expressions though, it totally depends on your requirements.
  • 但是，使用正则表达式的方法不止一种，完全取决于您的要求。

Here is a start

这是一个开始

  • I'm using a minimal snippet, so I've removed most of the unused code.
  • 我正在使用最小的代码段，因此我删除了大部分未使用的代码。
  • Listening to change event of input field.
  • 听取输入字段的更改事件。
  • Searching by first_name of the object here
  • 在此处按对象的first_name搜索

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

标签：

相关文章