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自动完成功能内置了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;
}

您可以通过更改.append()函数中.data('autocomplete')方法内的标记来自定义每个项，您可能希望查看其他自动完成事件< / em>如果您想进一步操纵<div id="wrapper">搜索结果，例如在<input>获得焦点时清除列表。

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
    }
});

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

2 个答案: