带搜索功能的下拉列表 如何实现，求高手帮助

[lesliemei]

采用.net MVC做开发，数据过多的情况，下拉列表用户体验不好，如何实现带搜索功能的下拉列表，如图所示

[EdsionWang]

引用 4 楼 lesliemei 的回复:

[quote=引用 1 楼 EdsionWang 的回复:] bootstrap-select https://developer.snapappointments.com/bootstrap-select/examples/#live-search_1

该链接只有一个案例有效果图，后面我式了下，没有发现带搜索框的，估计哪里没整对！[/quote] 需要引用.css和.js文件的

[EdsionWang]

bootstrap-select https://developer.snapappointments.com/bootstrap-select/examples/#live-search_1

[丰云]

常规效果，键盘弹起的事件中，获取输入框的内容，作为参数用ajax传递给后台相对应的action，查询出匹配的结果返回，在返回方法里刷新下了列表并显示出来。 如果下拉列表备选数据量小，可以一开始就全部拿到js里存储起来，这样就不用每次都ajax访问，直接在js数组里过滤结果再刷新下拉列表。

[lesliemei]

引用 2 楼 丰云 的回复:

常规效果，键盘弹起的事件中，获取输入框的内容，作为参数用ajax传递给后台相对应的action，查询出匹配的结果返回，在返回方法里刷新下了列表并显示出来。 如果下拉列表备选数据量小，可以一开始就全部拿到js里存储起来，这样就不用每次都ajax访问，直接在js数组里过滤结果再刷新下拉列表。

能否提供具体代码？？

[lesliemei]

引用 1 楼 EdsionWang 的回复:

bootstrap-select https://developer.snapappointments.com/bootstrap-select/examples/#live-search_1

该链接只有一个案例有效果图，后面我式了下，没有发现带搜索框的，估计哪里没整对！

[以专业开发人员为伍]

对于 MVVM 模式编程来说，“键盘谈起的事件中获取输入框的内容”其实就是声明 VM 绑定的模式不是输入焦点移开时、而是 AfterKeydown 立刻改变 VM数据。 同时实际上要设置为 VM 中抛出数据改变的通知能延时300毫秒。这样即使连续快速地 keydown 也不会产生无谓地多余的后台访问请求。 绑定 VM 模型的数据改变事件，访问后台请求访问，只需要将将结果放到进程本地的一个集合里就行了。因为 MVVM 模式肯定是将这个集合与下来框内容列表绑定起来的，数据改变了那么界面自然就会改变。 所以这类编程，对于一个纯前端开发人员来说，从完全没有下拉输入框的概念开始到写完最终程序，只需要1-2分钟（不含后台服务开发时间）。完全不用任何现成的什么插件，就用自然地最基本的 html element、样式就可以。或者用 bootstrap 最基本的下拉框组件，而不需要别的基于 bootstrap 的插件。

[以专业开发人员为伍]

总的来说，对于稍微复杂一点的 web 应用程序，一个前端开发人员跟asp.net开发人员相比，开发效率至少高20倍以上！