使用 jquery 在预定义的 html 块中呈现自动完成建议

Question

我有一个预定义的 HTML 代码，

<div id="wrapper">
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
</div>

还有一个输入框。我有一个远程源，它可以以 jsonp 格式返回结果。我想利用 jquery 的自动完成功能，但我不想将结果显示在新创建的 div 下拉列表中，而是想将它们填充到上面显示的现有 HTML 中。

我尝试了很多搜索，但似乎没有找到一种方法。我对 jquery 相当陌生，所以如果我遗漏了一些太明显的东西，请原谅我。

Answer 1

jQuery UI 自动完成具有内置功能，可以自定义结果的显示。 此演示展示了如何实现覆盖 _renderItem jQuery UI 自动完成代码中的“autocomplete”数据属性的 方法。

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() 方法内的标记来自定义每个项目 /code> 函数，如果您想进一步操作

搜索结果，您可能需要查看其他自动完成事件，例如示例清除列表，如果 获得焦点。

Answer 2

当您说远程源时，您是指数据库还是使用 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
    }
});