目前版本利用百度搜索,抓取匹配度高的词条(暂未实现选择词条进行搜索,后续更新此功能)
用三张效果图说明,html结构和css样式就不写了,直接看图:
然后贴实现代码,有jquery引用,贴了代码再来说明怎么实现的...
自定义了一个函数getItem,一个事件驱动函数。
1、用事件驱动,也就是每当输入框中按键弹起时候,驱动匿名函数。匿名函数中首先获取输入框中的值,因为直接插入URL进行get,所以用了encodeURI,将可能输入的中文编码下。如果输入框中有值不为空,则调用getItem函数,跨域JSONP抓取百度API输出的匹配词条,插入ul中;如果输入为空了,则清空ul。
2、利用上面的url,wd对应的搜索关键词,cb是百度后端的回调函数变量名。json.g和value.q中的g和q都是不可变的,因为必须要遵照返回的json格式,才能利用返回的数据。最后就是插值进<li>标签,再把<li>插进<ul>。完事~!
后续实现点击词条进行搜索,待更新...
更新:实现点击词条进行搜索功能,只需要稍稍改下js代码其实就可以实现了。直接贴更改后的代码...
还是利用百度的api,要跳转对应词条的搜索,其实很容易想到,在li标签里添加对应的a标签,再给a标签的href添加不同的跳转地址就行了。如上(加深区域),就是简单实现这一功能,再对css中li下的a标签添加下color或者text-decoration,处理一下。亲测如下可实现: