ajax json live search wont filter results

Question

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.

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

[{
    "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:

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

And where do you intend to filter the results? Is it on UI(js) or Backend (server) — Winter Soldier, Nov 22 '16 at 21:48

score 0 · Answer 1 · edited May 23 '17 at 12:07

The most obvious solution given that you are interested in filtering through UI would be to use Regular expressions.
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

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>

still not working. I took out the other code and placed this in the script, is that the right place? — Dan Stewart, Nov 23 '16 at 21:22
As I mentioned in the post, this code will not work for you as-is since it's not loading JSON. You need to figure out a way to fit this code into yours and hint: it's really a simple task. May I know what you have towards fixing your code using my demo? A simple copy-paste will not yield you a desired result. My demo is doing the heavy lifting but you need to configure it. Please let me know what you have done- where you are stuck and what is the error that you come across. — Winter Soldier, Nov 24 '16 at 15:07

ajax json live search wont filter results

1 Answers1