聚合物+ JQuery UI + Dart:自动完成不能正常工作
聚合物+ JQuery UI + Dart:自动完成不能正常工作
提问于 2014-06-30 17:26:12
我面临着以下令人困扰的问题：http://jqueryui.com/autocomplete/的代码示例在聚合物元素中使用时不能正常工作。我预计下拉列表将显示在输入元素的底部，但这会出现在页面的顶部。自动完成在条目页面中正常工作，如预期的那样。请看下面的代码。我的聚合物元件代码有什么问题？我能用JQuery UI和Dart聚合物一起使用吗？你能建议我有什么解决办法来解决聚合物和JQuery自动完成吗？我使用的最新版本的省道，省道-聚合物库和JQuery UI.
Dart Editor version 1.5.1.release (STABLE)
Dart SDK version 1.5.1
Dart-Polymer version 0.11.0+5
JQuery UI version 1.11.0条目页：
从条目页面自动完成-工作不正确！
从条目页面自动完成-工作良好
请参阅此示例的源代码。。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocomplete</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="autocomplete.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
<!-- JQuery UI -->
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.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>
<h1>Autocomplete JQuery UI Autocomplete issue!</h1>
<p>Polymer Element version of Autocomplete</p>
<div>
<cc-autocomplete count="5"></cc-autocomplete>
</div>
<br />
<p>Entry Page version of Autocomplete</p>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html><link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="cc-autocomplete">
<template>
<link rel="stylesheet" href="jquery-ui.css">
<!-- JQuery Autocomplete in the polymer element -->
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</template>
<script>
Polymer('cc-autocomplete', {
ready: 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"
];
$(this.$.tags).autocomplete({
source: availableTags
});
}
});
</script>
<script type="application/dart" src="autocomplete.dart"></script>
</polymer-element>import 'package:polymer/polymer.dart';
@CustomTag('cc_autocomplete')
class MyAutocomplete extends PolymerElement {
MyAutocomplete.created() : super.created();
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-01 08:36:05
当你在聚合物元素中使用它时，位置将被不同的计算。
jquery-ui.css说：
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}这就是为什么它会处于错误的位置。jQuery UI将无法确定从实际主体到DOM元素的正确位置，因为ShadowDOM的目的是隐藏这些信息。你必须自己计算出正确的偏移量来定位它。
你好，罗伯特
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24495632
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号