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

Posted 2023-05-07

技术标签:

【中文标题】Jquery UI 自动完成。如何使用 innerHTML 在 div 中写入结果？【英文标题】：Jquery UI autocomplete. How to write the results inside a div using innerHTML? 【发布时间】：2012-10-12 16:33:40 【问题描述】：

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

我已经在其他帖子中搜索过解决方案，但他们所做的是改变“弹出”窗口的位置，我想要的是用结果替换 -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>

【问题讨论】：

@j08691 这是一个例子：jsfiddle.net/BdZPX/5 请在您的问题中发布一些代码。 Stack Overflow 旨在实现自包含，不鼓励提出带有 jsFiddle 链接但没有代码的问题。请阅读this meta question 了解其背后的基本原理。 @FrédéricHamidi 好的，我做了更改。我不知道在这里发布代码，但它有很多意义。 :) 【参考方案1】：

正如 j08691 所说，您必须处理小部件的 open 事件。但是，由于您还想选择 #results 元素中的项目，因此复制它们是不够的。

我建议您将整个自动完成菜单重新设置为 #results 元素下的父项，并将其 position 样式属性重置为 static 以使其保持不变：

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

你可以在this update to your fiddle看到结果。

【讨论】：

如何替换div的内容而不是在末尾添加结果？【参考方案2】：

使用自动完成的打开事件，如 jsFiddle example。

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

【讨论】：

对不起，我没有正确解释问题。我想在 -div- 中显示整个可选结果列表，并在 -div- 中选择其中一个

以上是关于Jquery UI 自动完成。如何使用 innerHTML 在 div 中写入结果？的主要内容，如果未能解决你的问题，请参考以下文章

如何实现类似于 jQuery UI 自动完成的 Dojo 自动完成？