我有一个预定义的 HTML 代码，
<div id="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
我有一个输入框。我有一个远程源，它可以以 jsonp 格式返回结果。我想利用 jquery 的自动完成功能，但不是将结果显示在新创建的 div 下拉列表中，而是将它们填充到上面显示的现有 HTML 中。
我尝试了很多搜索，但我似乎没有找到方法来做到这一点。我对 jquery 还很陌生，所以如果我遗漏了一些太明显的东西，请原谅我。
【问题讨论】：
标签： jquery autocomplete customization jquery-autocomplete
jQuery UI 自动完成对结果的customize the display 具有内置功能。 This demo 展示了它是如何实现的，它覆盖了 jQuery UI 自动完成代码中“autocomplete”数据属性的 _renderItem 方法。
HTML
<label for="tags">Tags: </label><input id="tags" />
<div id="wrapper"></div>
JavaScript
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
// clear the existing result set
$('#wrapper').empty();
},
})
.data('autocomplete')._renderItem = function(ul, item) {
return $('<div class="element"></div>')
.data('item.autocomplete', item)
.append('<a href="#">' + item.label+ '</a>')
.appendTo($('#wrapper'));
};
CSS&（隐藏普通容器）
.ui-autocomplete {
display:none !important;
}
您可以通过更改 .data('autocomplete') 函数中的 .append() 方法内的标记来自定义每个 item，并且您可能希望查看其他自动完成 Events 如果您想进一步操作 <div id="wrapper"> 搜索结果，例如，如果 <input> 获得焦点，则清除列表。
【讨论】：
_renderItem，您可以看到默认的 jQuery UI 函数，我的答案中的代码被覆盖以将结果附加到您的 <div> 而不是正常的自动完成<ul>
<input> 上的blur 事件，例如$('#tags').blur(function() { $('#wrapper').empty(); }); 或将click 事件处理程序附加到window 对象以隐藏建议.
当您说远程源时，您是指数据库还是使用 iframe？
如果它是一个数据库，那么您正在从一些后端代码中检索。这是一个示例 ajax 请求
$.ajax({
type: 'GET',
url: 'path/to/server/code',
dataType: 'jsonp',
success: function(data) {
//where you would work with the object
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
},
jsonpCallback: function() {
//your callback funciton
}
});
【讨论】：