从手机app开始普遍使用以来，输入框的自动提示就开始成为了一个比较热门的实现功能模块，大大节约了用户的输入时间，增加了良好的体验
用户在输入一个字符串的部分内容时，就提供下拉菜单自动推荐相关常用字符串供用户选择以快速输入的一项功能特性
以就是输入框自动提示完成功能，如何结合我们的数据库来实现
同样也可以使用AJAX功能，以输入的片段内容，向WebServer端获取匹配筛选条件的字符串
在浏览器端，使用Web浏览器自带的功能，经由浏览器的窗体数据记忆功能，获取匹配条件的字符串
目前大多现代网页浏览器都已具备此功能
让用户不需要花费注意力、也不需要经验与专业知识即可直觉无误完成正确的操作
“自动完成”的设计思路源自于Poka-yoka预防机制
如果我们自己去实现的话，还需要判断浏览器等等操作，所以我使jquery已经给我们封装好的方法，就可以很方便快捷的实现了，接下来给大家来几个例子
自动补全实现的基本思路，类似于我们的模糊查询，匹配我们类似的字段内容，并把内容加载到提示面板
比如jquery中就有一个很好的方法autocomplete，通过它我们可以很方便的实现输入框的自动补全
如果针对于我们的web开发端来说，有很多组件以及框架已经给了我们很多解决方案去实现
集成开发环境中，甚至我们自己写的很长一串名字的方法名，也可以给我们自动补全
比如linux下面可以使用tab就可以自动补全命令以及文件路径
自动提示其实不单单是在web输入框里可见，在我们常用的电子邮件软件，集成环境编辑器，linux终端等等地方，都有发挥作用的地方
可以是一个静态的数据源，也可以是一个动态的，一般在我们的项目中都是动态，实时和数据后端交互的
然后就可以设置一个数据源供我们的调用
调用这么3个文件，就可以开心的玩了，文件可以在jq的官网下载
在jquery ui插件已经给我们很方便的方法
小实例.jpg
source: availableTags
当然还需要一个id为autocomplete的输入框来交互数据
小实例.jpg
像这样的就得到了这样一个效果，根据我们的输入来加载相应的数据
小实例.png
目录文件结构就这两个文件，index.html是就一个表单，search.php是对数据的操作，包括链接，已经查询相应的字段内容
如果是后端数据来的数据呢，我们应该怎么操作呢？不急，我们一起来看看
数据源，可以我们是js数组，也可以是json对象，也可以是xml序列化格式数据
小实例.png
这里的minLength是要求我们必须有一个字符
接着修改一下数据源
同样在index.html引入我们刚刚引入的那3个文件
小实例.jpg
echo json_encode($return_arr);这样index.html就可以接收到数据了
search.php中，数据库的链接采用的是pdo的方式，上图是进行匹配查询，并且遍历我们的数据集
小实例.jpg
小实例.png
数据库大概就这么个样子，匹配查询响应的字段就可以了。
就实现了这么一个输入自动提示，数据源来源于我们本地的数据库
小实例.png
其实自动补全功能，不单单这种方式去实现，还有很多方式很多好玩的组件。大家慢慢的去挖掘吧。我近期在写个小玩意，用到了，所以和大家分享下。如果你有什么好的建议或者是问题，你都可以发我或者发给赫赫美女，我都会整理回复，明天将会整理demo分享给大家。今天的分享就到这里吧
小实例.png
小实例.jpg
网友评论