CODEWITHSUNDEEP
javascripthtmlcssjson
Guvanch Hojamov
Guvanch Hojamov

Reputation: 346

Live Search JSON Data Using Ajax jQuery not work?

My code isn't working. This is my file. When it works it's not showing the list and throws error in Json file.I don't know why?? You can will see error in the Console

It's my Json file inner: data.json 

[
    {
      "name":"Angel Lewis",
      "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/0d4/2f7/07a3d35.jpg",
      "location":"Seattle, WA"
    },
    { ...
      },
      ......
    ]

$(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#search').keyup(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('data.json', function(data) {
   $.each(data, function(key, value){
    if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
    {
     $('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');
    }
   });   
  });
 });

 $('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
 });
});

Console

Upvotes: 1

Views: 183

Answers (1)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

I would suggest to run Your code on any server like XAMPP because XMLHttpRequest() not works on file:/// protocols. Therefore $.ajax or $.getJSON functions also will not work

Just try to run your files on http:// or https:// protocols

Upvotes: 2

Related Questions