javascript - 使用 Ajax jQuery 实时搜索 JSON 数据不起作用?

标签 javascript html css json

我的代码不工作。这是我的文件。 当它工作时它不显示列表并在 Json 文件中抛出错误。我不知道为什么? 您可以在控制台中看到错误

里面是我的Json文件: 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

最佳答案

我建议在任何服务器上运行您的代码,例如 XAMPP因为 XMLHttpRequest() 不适用于 file:/// 协议(protocol)。因此 $.ajax$.getJSON 函数也将不起作用

只需尝试在 http://https:// 协议(protocol)上运行您的文件

关于javascript - 使用 Ajax jQuery 实时搜索 JSON 数据不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58670597/

相关文章:

javascript - 在postman中创建常用函数或包含js文件?

javascript - 如何使用 vue js 提醒点击元素的 id?

javascript - Jquery 不透明度切换

javascript - jQuery 首先在幻灯片中加载空图像

html - 如何向带有背景图像的 ul/li 菜单添加填充?

javascript - 提取并添加指向字符串中 URL 的链接

javascript - 您如何通过桌面版 Google Chrome(如 Instagram)访问 native 登录功能?

javascript - 从 Python 代码使用 SignalR 服务器

javascript - 平滑滚动干扰引导轮播

html - 在 float div 上垂直居中对齐。容器有最小高度