jQuery UI的自动完成。如何编写使用innerHTML的一个div里面的结果吗？ [英] Jquery UI autocomplete. How to write the results inside a div using innerHTML?
问题描述
我有一个自动完成场到我的网站。我只是想显示-div-标签，而不是弹出窗口的打开插件本身内的结果。
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.
我搜索已经在其他职位。这个解决方案，但他们做的是改变弹出窗口的位置，而我想要的是结果，以取代-div-的内容，而不是把弹出了它。
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.
任何意见，将是非常美联社preciated。
Any advice will be very appreciated.
这是code，我有：
<!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说，你必须处理的开放widget的事件。但是，既然你也想选择在 #results 元素的物品，将它们复制是不够的。
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.
我建议你重定位你的 #results 元素下的整个自动完成菜单，而是和重置其的位置 style属性为静态所以它仍然存在：
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");
}
});
您可以看到在此更新的结果，你拨弄。
这篇关于jQuery UI的自动完成。如何编写使用innerHTML的一个div里面的结果吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
