突然的一个需求就是搜索下拉 但是之前用html原声写过一次 那个逻辑就很清晰 ,那么我们就演示一下如何使用 组件实现下拉
最终效果
代码演示
1、这样就是一个简单的select+option实现的input搜索下拉列表显示的简单的一个模版
2、这样就会导致 只能选择搜索一次 第二次重新选择就会没有下拉列表 那么我用了blur事件来监听下拉缩回去的时候 就将值清空重新发起请求 这样就会出来了
3、但是还是会有一个问题 就是我们输入0或者1 或者没有的值搜索的时候就会 清空输入框 并且立刻缩回去
原因:因为输入框如果没有发请求的时候会返回一个null那么下拉列表就没东西了 所以就为空了
解决:
当用户输入 0 或者没有的值的时候 就判断一下 如果返回数据为空 就将input 的值为空 重新发起请求 这样列表就又出来了