Jquery ui jQueryUI自动完成。如何使用innerHTML在div中写入结果？_Jquery Ui_Html_Autocomplete_Innerhtml

Jquery ui jQueryUI自动完成。如何使用innerHTML在div中写入结果？

jquery-ui html autocomplete

Jquery ui jQueryUI自动完成。如何使用innerHTML在div中写入结果？,jquery-ui,html,autocomplete,innerhtml,Jquery Ui,Html,Autocomplete,Innerhtml,我的网站中有一个自动完成字段。我只想在一个-div-tag中显示结果，而不是插件本机打开的弹出窗口我已经在其他帖子中搜索了解决方案，但他们所做的是改变“弹出”窗口的位置，我想要的是用结果替换-div-的内容，而不是将弹出窗口放在上面任何建议都将不胜感激这是我的代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQ

我的网站中有一个自动完成字段。我只想在一个-div-tag中显示结果，而不是插件本机打开的弹出窗口

我已经在其他帖子中搜索了解决方案，但他们所做的是改变“弹出”窗口的位置，我想要的是用结果替换-div-的内容，而不是将弹出窗口放在上面

任何建议都将不胜感激

这是我的代码：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>


</body>
</html>


jQuery UI自动完成-默认功能
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
});
标签：

使用自动完成的打开事件，如下面的所示

    open: function(e, ui) {
        var list = '';
        var results = $('ul.ui-autocomplete.ui-widget-content a');
        results.each(function() {
            list += $(this).html() + '<br />';
        });
        $('#results').html(list);
    }

open：功能（e、ui）{
var列表=“”；
var results=$（'ul.ui-autocomplete.ui-widget-content a'）；
结果。每个（函数（）{
list+=$（this.html（）++'
'；
});
$（'#results'）.html（列表）；
}

正如j08691所说，您必须处理小部件的事件。但是，由于您还希望选择

#results

元素中的项目，因此仅复制它们是不够的

我建议您在

#results

元素下重新分配整个自动完成菜单，并将其样式属性重置为

static

，使其保持不变：

$("#tags").autocomplete({
    source: availableTags,
    open: function() {
        $(this).autocomplete("widget")
               .appendTo("#results")
               .css("position", "static");
    }
});

您可以在中看到结果。

@j08691这里是一个示例：请在您的问题中发布一些代码。堆栈溢出的目标是自包含的，不鼓励使用链接到JSFIDLE但没有代码的问题。请阅读这背后的理由。@FrédéricHamidi好的，我做了更改。我不知道在这里发布代码，但它很有意义。：）对不起，我没有正确地解释这个问题。我想在-div-中显示可选择的结果的整个列表，并在-div中选择其中一个，如何替换div的内容而不是在其末尾添加结果？