高手莫入,浅显例子而已。最近在更换项目中的javascript库,觉得如果能把实践的过程记录下来,应该可以帮助到一些对javascript感兴趣的前端初学者。

jquery-auto-complete

每天使用百度,google,有的时候,你的网站或许需要一个自动完成的功能。 你可以在这个例子中,搜索新浪,或者苏洋,因为是测试PHP,没有数据库请求操作,只有简单的两个词库,你懂的。

完整例子: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/

首先还是页面结构

结构草图: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/step1.html

然后是样式

样式: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/step2.html

接着一边想需求,一边实现吧。

基本事件: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/step3.html

之前一直是用写死的table数据,实际使用中,我们需要从服务器后端获取数据,所以呢。

接下来开始优化之前的代码和进行数据绑定。 要交互数据,首先要设计数据格式。

接下来用这份数据,生成我们需要的表格。 顺便把刚刚随便想到的草稿代码,整理一下

输出数据: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/step4.html

感觉是不是距离成品越来越近了,那么把没有做的功能加上,关键是可以从数据源取数据。

优化和抽象: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/step5.html

这里随便写了一个PHP,模拟输出搜索内容的返回数据

最后就是为了以后的复用,插件化

插件化: http://thecdn.sinaapp.com/page/demo/jq-auto-complete/index.html

调用方法还是简单的

写在最后,又写完了一篇。

因为很多内容在之前的两篇,还有之前的注释中提到过,所以不会再次赘述,如果有疑问,不妨先看看之前的内容。

实在无解,可以留言提问,一起学习,一起成长。我觉得内容还是很简单的,尤其是分解动作之后。