使用 JavaScript 标记列表中的单词
Use JavaScript to Flag a Word From a List
我正在尝试使用 javascript 来标记集合列表中的单词,但它似乎不起作用。基本上,我希望用户能够输入一个单词,如果它与右侧列表中的任何单词匹配,它将单词标记为红色。
知道我做错了什么吗?
http://jsfiddle.net/Copernicus76/rpuXW/embedded/result/
// Load the banned plates json data
var platesJson = (function () {
platesJson = null;
$.ajax({
'async': false,
'global': false,
'url': "bannedplates.json",
'dataType': "json",
'success': function (bannedplates) {
platesJson = bannedplates;
}
});
return platesJson;
})();
$(document).ready(function () {
// Draw the list //
$.each(platesJson, function (i) {
$('#plate-list').append('<div class="row-' + i + '">' + platesJson[i].plate + '</div>');
});
// Search the banned plates //
$('#plate-text').keyup(function () {
var result = '';
var plateRow = '';
var scrollPosition;
var searchText = $('#plate-text').val().toUpperCase();
$.each(platesJson, function (i) {
if (searchText == platesJson[i].plate) {
result = 'banned';
plateRow = i;
scrollPosition = i * 19;
}
});
if (/'S/.test(searchText)) {
if (result == 'banned') {
$('#plate-intro,#plate-ok').hide();
$('#plate-banned').show().fadeOut(1500);
$('#plate-text').addClass('banned');
$('#plate-list').animate({
scrollTop: scrollPosition
}, 1000);
$('#plate-list div.row-' + plateRow + '').addClass('banned');
} else {
$('#plate-intro,#plate-banned').hide();
$('#plate-ok').show().fadeOut(1500);
$('#plate-text').removeClass('banned');
}
} else {
$('#plate-text').val('');
$('#plate-ok,#plate-banned').hide();
$('#plate-intro').show();
}
});
}); // end document ready
var platesJson = (function () {
platesJson = null;
$.ajax({
'async': false,
'global': false,
'url': "bannedplates.json",
'dataType': "json",
'success': function (bannedplates) {
platesJson = bannedplates;
}
});
return platesJson;
})();
这不是 ajax 的工作方式。第一个a
表示 asynchronous
,因此每当响应返回时,成功函数都会运行。这不会立即发生,可能需要几分钟或完全失败。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
});
}
});
相关文章:
- 在字符串列表中搜索任何出现的单词,如果单词的第一个字符匹配,则高亮匹配单词.Javascript正则表达式
- 如何根据 js 中每个单词的第 n 个字母按字母顺序排列列表
- 如何将单词列表拆分为数组
- JQuery-从单词列表生成网格
- JavaScript-从脚本中的单词列表创建一个html表或网格
- 如何更新单词列表中搜索框中包含用户键入内容的单词/字母数
- 创建一个输入,该输入在用户键入后立即不断更新单词列表
- 忽略单词列表
- JavaScript中要忽略的单词列表
- 如何检查我的 chrome 扩展程序的 if 语句中的单词列表
- 如何使用Javascript正则表达式从可能的单词列表中获取单词的最后一次出现
- 在JavaScript中,如何使用regex进行匹配,除非单词在排除的单词列表中
- 如何使用正则表达式来获取阿拉伯字符串中的单词列表?
- 将单词列表转换为数组
- 向单词列表添加一些文本
- 有没有“电影演职员表”滚动显示?样式插件的单词列表
- 获取字符串中包含子字符串的单词列表
- 使用可选的包含和排除单词列表来定位一组单词
- 纯Javascript -查找/替换DOM中的单词列表
- JavaScript表单验证 - 值长度和阻止的单词列表