自动完成标签出现在错误的地方答案

【问题标题】：autoComplete tag appears on the wrong place自动完成标签出现在错误的地方
【发布时间】：2016-04-02 12:53:42
【问题描述】：

我正在使用 PrimeFaces 和 JSF 来完成我的学业并使用 jQueryUI 主题滚轮对其进行样式设置，并且特定标签：<p:autoComplete> 在 CSS 处于活动状态时有一个错误（当我禁用 css 时它工作正常），这是它的外观：错误

autoComplete 应该在“Modelo:”旁边，但它在页面角落。

我发现这段代码带有“自动完成”功能：

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

同样的代码也出现在jquery-ui.css 和jquery-ui.structure.css 中。还有一些带有“自动完成”功能的 JavaScript 代码，但它们太大了，所以我把它们放在这个链接上： http://hostcode.sourceforge.net/view/4282

我不太了解 CSS 和 Javascript，所以我请求你们帮助我解决这个错误。

仅供参考：我在 <p:panelGrid> 中使用 p:autocomplete>，另外，对于英文错误，我深表歉意 :)

【问题讨论】：

使用 jQuery UI 自动完成。请参考我的答案！
谢谢@Venkatraman，但解决这个问题要简单得多，我刚刚将css中的.ui-autocomplete位置从绝对更改为相对，当然，我必须更改.ui-autocomplete 出现的每个文件。
不错。在同一个问题中添加它作为您的答案:)！
下次，请创建一个标签不那么广泛的问题。您可能会得到与 pf 无关的答案
您可以创建自己的 css 类来覆盖位置属性并将其添加到您需要的位置，而不是更改库文件。全局更改它可能会导致其他地方出现问题。

标签： css jsf primefaces

【解决方案1】：

解决这个问题要简单得多，我刚刚将 .ui-autocomplete 在 css 中的位置从绝对更改为相对，当然，我必须在每个出现 .ui-autocomplete 的文件中进行更改

【讨论】：

这个答案比另一个更适用

【解决方案2】：

使用jQuery 和jQuery UI 请参阅以下代码段。

参考网址：https://jqueryui.com/autocomplete/

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

【讨论】：

我已经运行了一个方法，该方法在 java 类中返回一个 arrayList 来拉取 autoComplete 标记，有没有办法把这个 arrayList 放在那个 javascript 函数中？
是的，创建一个 Rest GET API 调用
如果它的硬编码变量来自 java 然后参考 url 如何添加：stackoverflow.com/questions/4803906/…
对（错误标记的）PrimeFaces 问题的错误答案
@Kukeltje，最初这是意料之中的。所以建议角度方式自动完成！