我想将服务器收到的搜索结果转换为无序列表:
function searchSuccess(json, textStatus, jqXHR) {
console.log('json is:', json);
var html= "<ul>";
Object.keys(json).forEach(function(key, val) {
html += "<li><a href=\'" + val['slug'] + "\'>" + val['title'] +"</a></li>";
});
html +="</ul>"
$('#search-results').append(html);
}
我在控制台中看到的json是这样的:
json is: [{"title":"Hello World","slug":"hello-world"},{"title":"I'm a title","slug":"I-am-title"}]
但是,呈现li
的undefined
是列表的替代链接的。
怎么了 我该如何解决?
您在json中有一个带有javascript对象的数组列表。这些代码有效:
var json = '[{"title":"Hello World","slug":"hello-world"},{"title":"I\'m a title","slug":"I-am-title"}]';
function searchSuccess(json) {
console.log('json is:', json);
var html= "<ul>";
jsonObject = JSON.parse(json);
jsonObject.forEach(function(searchresult) {
html += "<li><a href=\'" + searchresult.slug + "\'>" + searchresult.title +"</a></li>";
});
html +="</ul>"
$('#search-results').empty().append(html);
}
searchSuccess(json);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-results"></div>
var json = '[{"title":"Hello World","slug":"hello-world"},{"title":"I\'m a title","slug":"I-am-title"}]';
function searchSuccess(json) {
var $ul = $('<ul>');
jsonObject = JSON.parse(json);
jsonObject.forEach(function(searchresult) {
var $li = $('<li>');
var $a = $('<a>');
$a.attr('href', searchresult.slug)
$a.text(searchresult.title);
$li.append($a);
$ul.append($li);
});
$('#search-results').empty().append($ul);
}
searchSuccess(json);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-results"></div>
此
undefined
问题已解决,但问题在于,每次键入密钥后,它都会附加来自服务器的任何内容。有什么方法可以仅针对最新搜索结果进行过滤?或者,如果您想在添加新内容之前清除div,则可以替换
$('#search-results').append(html)
为$('#search-results').empty().append(html)
谢谢马克,但这仍然可以达到结果。我的意思是消除以前的(不相关的)结果集,并显示与搜索词匹配的最新结果集。发出值的函数在此处:stackoverflow.com/questions/56868810 / form-input-field-not-recognized-in-jquery
再次添加了我的答案,添加了
empty()
在添加新内容之前清除div 的功能。