通过本文主要向大家介绍了input,搜索提示,oninput,onpropertychange等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
挺炫的一个效果，百度和谷歌好像已实现好多年了，我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求，发现还真找不到。于是自己动手写这个效果，由于我是把效果整合到我的整套框架里，所以没有进行单独的封装。
需求：
实现带提示的input框，类似百度搜索，有改动的时候去获取常用关键词，数据来源于系统数据库，支持鼠标选择或键盘选择
思路：
框架一贯思路，通过class作为监听入口，通过data作为数据传递；
通过监听input和propertychange事件实现实时的改动监听，input是主流，propertychange是ie，你懂的；
通过ajax实现post动作，把返回内容显示成类似选框的形式；
监听键盘的上键（38）、下键（40）、回车键（13），通过绑定keydown，判断event.keycode实现；
监听鼠标的mouseover和click事件，与键盘动作要完美结合；
若input内容要求与已知选项必须一致，则监听blur事件，判断是否允许换焦点；
实现代码：
CSS这里就不放出了，我的实现效果如下：