Question

我遇到了以下令人烦恼的问题：来自http://jqueryui.com/autocomplete/的代码示例在聚合物元素内部使用时无法正常工作。我希望下拉列表将显示在输入元素的底部，但它显示在页面的顶部。自动完成功能在输入页面中正常工作。请看下面的代码。我的聚合物元素代码有什么问题？ Dart Polymer可以一起使用JQuery UI吗？你能建议我解决聚合物和JQuery Autocomplete问题吗？我使用最新版本的dart，dart-polymer库和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

输入页面：

page

从输入页面自动完成 - 工作不正确！

Autocomplete from the polymer element!

从输入页面自动完成 - 工作正常

Autocomplete from the entry page

另请参阅the source code of this example。

代码：

<!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();
}

Answer 1

当您在聚合物元素中使用它时，位置的计算方式会有所不同。

jquery-ui.css说：

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

这就是为什么它会处于错误的位置。 jQuery UI无法确定从实际正文到DOM元素的正确位置，因为ShadowDOM旨在隐藏这些信息。你必须自己通过计算正确的偏移量来定位它。

此致罗伯特

Polymer + JQuery UI + Dart：自动完成功能无法正常工作

1 个答案: