gpt4 book ai didi

javascript - 如何清除 angularjs 中的 uib-typeahead 下拉列表

转载 作者:行者123 更新时间:2023-12-02 21:21:33 27 4
gpt4 key购买 nike

我使用 uib-typeahead。当我在 uib-typeahead 中输入内容时,我正在进行 api 调用。

我在 uib-typeahead 文本框旁边添加了取消图标,以便在单击该取消图标时清除该文本和下拉值,但是当我单击取消图标时,它只会清除 uib-typeahead 中的文本。下拉菜单不清晰。

单击取消图标时如何清除下拉列表?

HTML

<input class="form-control" type="text" ng-model="searchObject" placeholder="Search name" 
uib-typeahead="value as value.name for a in search($viewValue)"
     typeahead-on-select="onSelect($item, $model, $label)">
     
<--! This is Cancel button -->                    
          <a class="clear" ng-click="searchObject = null;">
        <span class="fa fa-times"></span>
     </a>

JS

$scope.search = function(val) {
//Some API call and return Array Of Object
return Array Of Object
};

最佳答案

我刚刚开始研究类似的问题 - 隐藏下拉菜单。

假设您的输入元素包含在包含 id 的表单元素中:

HTML

<form name="test" id="test">
<input class="form-control" type="text" ng-model="searchObject" placeholder="Search name" uib-typeahead="value as value.name for a in search($viewValue)"
typeahead-on-select="onSelect($item, $model, $label)">

<--! This is Cancel button -->
<a class="clear" ng-click="hideDropDown()">
<span class="fa fa-times"></span>
</a>
</form>

uib-typeahead 在无序列表中创建具有“dropdown-menu”类的下拉菜单。

您可以在函数中访问下拉菜单样式:

JS


$scope.hideDropDown = function() {
var dropDown = document.getElementById("test").querySelectorAll("ul.dropdown-menu");
dropDown[0].style.display = "none";
};

变量 dropDown 返回包含下拉菜单类的所有 UL 元素的数组。如果您有多个 uib-typeahead 下拉菜单,则可以按 HTML 中的顺序引用它们。

关于javascript - 如何清除 angularjs 中的 uib-typeahead 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60833007/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com