使用JavaScript标记列表中的单词

我正在尝试使用javascript标记集合列表中的一个单词，但它似乎不起作用。基本上，我希望用户能够键入一个单词，如果它与右边列表中的任何单词匹配，它会用红色标记该单词

知道我做错了什么吗

//加载json数据
变量platesJson=（函数（）{
platesJson=null；
$.ajax({
“异步”：false，
“全局”：错误，
“url”：“bannedplates.json”，
“数据类型”：“json”，
“成功”：功能（横幅板）{
platesJson=横幅板；
}
});
返回板；
})();
$（文档）.ready（函数（）{
//列出清单//
$。每个（平台、功能（i）{
$（“#图版列表”）.append（“”+platesJson[i]。图版+“”）；
});
//搜查被禁车牌//
$（“#图版文本”）.keyup（函数（）{
var结果=“”；
var Platrow=''；
变量位置；
var searchText=$（“#图版文本”）.val（）.toUpperCase（）；
$。每个（平台、功能（i）{
if（searchText==platesJson[i].plate）{
结果=‘禁止’；
plateRow=i；
滚动位置=i*19；
}
});
如果（/\S/.test（searchText））{
如果（结果=‘禁止’）{
$（'plate intro，'plate ok'）。隐藏（）；
$（“#板禁止”）.show（）.fadeOut（1500）；
$（“#图版文本”）.addClass（“禁止”）；
$（“#板材列表”）。设置动画({
scrollTop：滚动位置
}, 1000);
$（“#板材列表分区行-”+板材行+”）.addClass（'banked'）；
}否则{
$（“#图版介绍，#图版禁止”）.hide（）；
$（“#板正常”）.show（）.fadeOut（1500）；
$（“#图版文本”）.removeClass（“禁止”）；
}
}否则{
$（“#图版文本”）.val（“”）；
$（“#车牌正常，#车牌禁止”）.hide（）；
$（#plate intro'）.show（）；
}
});
}); // 结束文件准备就绪

ajax不是这样工作的。第一个

a

表示

asynchronous

，因此只要响应返回，success函数就会运行。这不会立即发生，可能需要几分钟，也可能完全失败。

success

方法是回调。那就是你想变魔术的地方

  $.ajax({
      'async': false,
      'global': false,
      'url': "bannedplates.json",
      'dataType': "json",
      'success': function (bannedplates) {
          $.each(bannedplates, function (i) {
              $('#plate-list').append('<div class="row-' + i + '">' + bannedplates[i].plate + '</div>');
          });
          $('#plate-text').keyup(function () {
              // ...the rest of your code
          });
      }
  });

$.ajax({
“异步”：false，
“全局”：错误，
“url”：“bannedplates.json”，
“数据类型”：“json”，
“成功”：功能（横幅板）{
$。每个（横幅板，功能（i）{
$（“#板列表”）。追加（“”+横幅板[i]。板+“”）；
});
$（“#图版文本”）.keyup（函数（）{
//…剩下的代码
});
}
});

使用控制台（F12）启动所有调试，大多数情况下您会发现错误。请针对您遇到的问题详细说明实际问题。不要要求人们为您调试代码您的第一个问题是您将

$.ajax

视为一个同步函数。在应用程序其余部分的上下文中，

platesJson

将始终为空。我很抱歉，请忽略这个问题，因为我希望得到调试帮助，因为我不知所措。@Nick的评论指出了你的问题的一大部分。试着研究一下javascript异步编程以及如何使用回调函数。谢谢Joe。我来试一试

  var platesJson = (function () {
      platesJson = null;
      $.ajax({
          'async': false,
          'global': false,
          'url': "bannedplates.json",
          'dataType': "json",
          'success': function (bannedplates) {
              platesJson = bannedplates;
          }
      });
      return platesJson;
  })();

  $.ajax({
      'async': false,
      'global': false,
      'url': "bannedplates.json",
      'dataType': "json",
      'success': function (bannedplates) {
          $.each(bannedplates, function (i) {
              $('#plate-list').append('<div class="row-' + i + '">' + bannedplates[i].plate + '</div>');
          });
          $('#plate-text').keyup(function () {
              // ...the rest of your code
          });
      }
  });