在输入框中输入内容,下拉出现自动提示列表,鼠标上下键选择提示中的项,然后回车选择相应的项。
实现原理:JS监听输入框的kedown、keyup、focusout事件。
- 输入内容的时候keyup触发调取后台数据,并接收返回的数据弹出自动提示内容。
- 键盘按下的时候keydown判断是否是上下键、回车键、退格删除键,如果是上下键,通过js改变相应内容的显示状态标为当前状态,如果是回车键,将标记为当前选中状态的内容添加到目标HTML标签中,如果是回退删除键判断下输入框里面是否有内容,如果没内容删除目标HTML标签中最后添加的元素。
- 当input框失去焦点的时候出发focusout事件,执行隐藏提示内容。
1 | $(function(){ |
关注 web翎云阁,定时推送,互动精彩多,若你有更好的见解,欢迎留言探讨!