如何将jQuery的自动完成结果返回到单独的div? [英] How to return jquery autocomplete result to the separate div?

问题描述

我发现此处覆盖了其中一个自动完成事件.但是有人可以为我提供如何做同样的例子吗?

I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?

推荐答案

appendTo选项确实可以按预期工作，并且，如果您在DOM上进行检查，则<ul> results元素将附加到该元素.但是，由于jQueryUI生成的绝对定位，该列表仍出现在 的正下方.

The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.

也就是说，您可以覆盖内部的_renderItem，以将结果直接附加到完全不同的元素上，例如:

That said, you can override the internal _renderItem to directly append results to a completely different element, for example:

<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>

JavaScript

$('input').autocomplete({
    search: function(event, ui) {
        $('.test ul').empty();
    },
    source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.test ul'));
};

我还创建了一个 演示 进行演示.请注意，最新的jQuery库尚未对jQueryUI进行全面测试，因此我使用的是以前的版本，该版本允许我选择直接在jsFiddle选项中包含jQueryUI.

I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.

这篇关于如何将jQuery的自动完成结果返回到单独的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！