可以输入值的下拉框(select和input的组合使用)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LHJBK/article/details/77007688

一些时候为了方便用户,提升用户的良好体验,我们需要在设计下拉框的同时,允许用户输入自己的数据,方便提高搜索效率。下面一段简单的代码实现,select和input的结合实现可以输入数据的下拉框。

HTML代码:

            <div style=":auto;padding:5px;">
                <select  id="demoSelect" ng-model="binding.value"  style="width:100%;height:26px;"  ng-options="key for key in binding.landarr"></select>
                <input  id="inputselect" type="text"ng-model="binding.value"  style="width:90%;height:26px;position: relative;top: -26px"ng-change="valueChange()" />
            </div>

注意,input最好在select之后写,ng-model需要绑定同一数据。然后input和select框的大小和位置根据实际情况进行调整。最后效果应该是这样的
这里写图片描述

文本框可以输入数据,与binding.value绑定,传给select,即可实现可输入可选择的需求。

没有更多推荐了,返回首页