如何修改自动完成输入以不影响 css 或 html？答案

【问题标题】：How to modify autocomplete input for not effect to css or html?如何修改自动完成输入以不影响 css 或 html？
【发布时间】：2017-03-22 16:38:58
【问题描述】：

我正在尝试创建一个弹出窗口，我做了什么，这不是主要的事情。

就是这种情况，我在弹出窗口中添加了一个自动完成的文本框，并在其下方添加了一个带有两个按钮的文本框。但是当我在文本框中输入一些输入时，它会建议我三个最接近的单词，但它会影响其他按钮和文本框，它们正在下降，我不希望它这样做。一切都必须稳定，我该如何处理这个问题？更多信息，截图如下。

谢谢...

without entering a data to textbox

after entering a data to textbox

【问题讨论】：

使用绝对位置将弹出窗口附加到 z-index 高于其他元素的主体？
弹出窗口打开得很好，弹出窗口没有问题，问题是弹出窗口中的文本框，我可以为文本框写一些css吗？
你能发布代码吗，你创建弹出窗口的方式可能有问题
已发布！！.......
这个 >>
- {{countrydata}}
可以附加到其下方输入标签的父级具有更高的 z-index 和绝对定位

标签： html css autocomplete popup autocompletetextview

【解决方案1】：

<div class="header">X</div>
<form name="X" class="content">

    <div>
        <input type="text" name="country" id="country" ng-model="country" ng-change="complete(country)" class="form-control" />
        <ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
            <li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-if="$index < 3" ng-click="fillTextbox(countrydata)">{{countrydata}}</li>
        </ul>
    </div>

    <input type="text" class="form-control" id="qty" placeholder="Quantity">

    <!-- Dialog Buttons -->
    <br />
    <br />
    <div class="ngdialog-buttons">
        <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="">CANCEL</button>
        <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="" ng-disabled="">OK</button>
    </div>
</form>

这是popup的源代码，它被页面中的另一个按钮调用并以这种样式和html打开......

【讨论】：