一场由股票提醒助手插件引发的血案——浅入浅出 jquery autocomplete

 

我没有学过前端，所以这篇文章注定要班门弄斧了。

通常，需要用到什么技术什么语言时，我才去学，学了也不一定掌握，就是记不住！所以现在明白了，学习的时候，亦或是攻克难点的时候，一定要记录下来，并不一定非要呈现什么高大上的技术，但求复原自己的心路历程足以。

大家都知道，最近股市很火爆，当然这几天正在调整期呵呵，神车复牌都交出一天涨停一天跌停的答卷自降为灵车，相比于528垂直过山车，见怪不怪了。很多人虽然没投入大量精力炒股，但还是时刻关注着股市行情，上班族们总不能时刻盯着手机看吧，所以我就想到了股票插件，chrome浏览器（361极速浏览器也OK）中的股票插件 https://chrome.google.com/webstore/detail/%E8%82%A1%E7%A5%A8%E6%8F%90%E9%86%92%E5%8A%A9%E6%89%8B/goiffchdhlcehhgdpdbocefkohlhmlom#，这个玩意可以添加自选股，并且几乎实时地通过新浪财经同步（就是看着数字就放心了），试用过后发现挺有意思，于是尝试获取源码，把这个插件的所有html/js/css/image文件都下载下来，并且按照chrome插件开发教程把文件结构、manifest都一步步搞定，现在已经在github开源：https://github.com/hustlbj/chrome-extensions仓库中的StockHelper。

简单介绍一下这个小插件：在浏览器插件栏中的图标是background.html，实时获取自选股的价格，然后刷新到图标和标题中；popup.html是点击图标以后弹出的详情页面，可以查看每支股票的价格折线图、日K线图、成交量之类的详情，选中某支股票，则该支股票的当前价会实时刷新到图标中；options.html是点击自选股后打开的页面，进行自选股的添加删除，输入名称、简写、代码都可以查找。它的股票代码是保存在一个stocks.js文件中的，我们在添加新股票输入部分字母时，会执行autocomplete来自动搜索匹配stock.js中的股票然后为我们呈现一个选项列表，这就是自动填充的功能，如下图：

那么问题来了，将候选数据保存在本地文件（变量）中，虽然检索速度快，但是新股IPO以后还得更新插件版本或者你自己把代码加到stocks.js中，虽说不难，但是我可替广大小白表示忍不了。。好嘛，既然源代码都搞定了，修复个小bug也是顺便的事，不修复不舒服斯基。

查看源码，options.html中引用的是

jquery 1.7

autocomplete 1.1（注意版本，新的autocomplete的参数列表可能不同，这里不做讨论）

默认参数：