今天和大家分享下Auto-Complete 实战技术

也就是输入框自动提示完成功能，如何结合我们的数据库来实现
用户在输入一个字符串的部分内容时，就提供下拉菜单自动推荐相关常用字符串供用户选择以快速输入的一项功能特性
从手机app开始普遍使用以来，输入框的自动提示就开始成为了一个比较热门的实现功能模块，大大节约了用户的输入时间，增加了良好的体验
“自动完成”的设计思路源自于Poka-yoka预防机制
让用户不需要花费注意力、也不需要经验与专业知识即可直觉无误完成正确的操作
目前大多现代网页浏览器都已具备此功能
在浏览器端，使用Web浏览器自带的功能，经由浏览器的窗体数据记忆功能，获取匹配条件的字符串
同样也可以使用AJAX功能，以输入的片段内容，向WebServer端获取匹配筛选条件的字符串
自动提示其实不单单是在web输入框里可见，在我们常用的电子邮件软件，集成环境编辑器，linux终端等等地方，都有发挥作用的地方
比如linux下面可以使用tab就可以自动补全命令以及文件路径
集成开发环境中，甚至我们自己写的很长一串名字的方法名，也可以给我们自动补全
如果针对于我们的web开发端来说，有很多组件以及框架已经给了我们很多解决方案去实现
比如jquery中就有一个很好的方法autocomplete，通过它我们可以很方便的实现输入框的自动补全
自动补全实现的基本思路，类似于我们的模糊查询，匹配我们类似的字段内容，并把内容加载到提示面板
如果我们自己去实现的话，还需要判断浏览器等等操作，所以我使用jquery已经给我们封装好的方法，就可以很方便快捷的实现了，接下来给大家来几个例子
在jquery ui插件已经给我们很方便的方法

图片发自App

调用这么3个文件，就可以开心的玩了，文件可以在jq的官网下载，明天我也会发demo给大家
然后就可以设置一个数据源供我们的调用
可以是一个静态的数据源，也可以是一个动态的，一般在我们的项目中都是动态，实时和数据后端交互的

图片发自App

当然还需要一个id为autocomplete的输入框来交互数据
source: availableTags
像这样的就得到了这样一个效果，根据我们的输入来加载相应的数据
数据源，可以我们是js数组，也可以是json对象，也可以是xml序列化格式数据
如果是后端数据来的数据呢，我们应该怎么操作呢？不急，我们一起来看看
目录文件结构就这两个文件，index.html是就一个表单，search.php是对数据的操作，包括链接，已经查询相应的字段内容
同样在index.html引入我们刚刚引入的那3个文件
接着修改一下数据源
这里的minLength是要求我们必须有一个字符

图片发自App

图片发自App

search.php中，数据库的链接采用的是pdo的方式，上图是进行匹配查询，并且遍历我们的数据集
echo json_encode($return_arr);这样index.html就可以接收到数据了
不过在查询这里，真正用户项目中的方法，肯定是不能使用like模糊查询的，会做很多优化
就实现了这么一个输入自动提示，数据源来源于我们本地的数据库
数据库大概就这么个样子，匹配查询响应的字段就可以了。
其实自动补全功能，不单单这种方式去实现，还有很多方式很多好玩的组件。大家慢慢的去挖掘吧。