Jquery UI 自动完成.如何使用innerHTML在div中写入结果? [英] Jquery UI autocomplete. How to write the results inside a div using innerHTML?

查看：18
本文介绍了Jquery UI 自动完成.如何使用innerHTML在div中写入结果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

任何建议将不胜感激.

这是我拥有的代码:

<html lang="zh-cn"><头><meta charset="utf-8"/><title>jQuery UI 自动完成 - 默认功能</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"/><脚本>$(函数(){var availableTags = ["动作脚本","AppleScript","阿普",基本的"，C"，"C++","Clojure","COBOL","冷聚变","二郎","Fortran",格调"，"哈斯克尔","爪哇","JavaScript","Lisp","珀尔","PHP",Python"，红宝石"，"斯卡拉",方案"];$( "#tags" ).autocomplete({来源:availableTags});});<身体><div class="ui-widget"><label for="tags">标签:</label><input id="tags"/>

.

解决方案

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

我建议您重新设置 #results 元素下的整个自动完成菜单，并重置其 position 样式属性设置为 static 使其保持原位:

$("#tags").autocomplete({来源:availableTags，打开:函数(){$(this).autocomplete("widget").appendTo("#results").css("位置", "静态");}});

您可以在此小提琴更新中查看结果.

I have an autocomplete field into my website. I just want to display the results inside a -div- tag instead the popup window that the plugin opens natively.

I searched already for solutions for this in other posts, but what they do is to change the position of the "popup" window, and what I want is to replace the content of the -div- with the results, not to put the popup over it.

Any advice will be very appreciated.

This is the code that I have:

<!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>

.

解决方案

As j08691 says, you have to handle the open event of the widget. However, since you also want to select the items in the #results element, copying them will not be enough.

I would suggest you reparent the whole autocompletion menu under your #results element instead, and reset its position style attribute to static so it remains in place:

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

You can see the results in this update to your fiddle.

这篇关于Jquery UI 自动完成.如何使用innerHTML在div中写入结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆