JSONP利用百度搜索的API实现下拉词条

  目前版本利用百度搜索,抓取匹配度高的词条(暂未实现选择词条进行搜索,后续更新此功能)

  用三张效果图说明,html结构和css样式就不写了,直接看图:


1.默认状态
2.输入词条
3.继续输入,深度匹配

  然后贴实现代码,有jquery引用,贴了代码再来说明怎么实现的...

用jquery实现js代码

自定义了一个函数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,处理一下。亲测如下可实现:


可跳转百度搜索的<li>词条

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,091评论 25 709
  • 某一天 我只是想模拟实现一下百度下拉搜索 结果发现小小的一点代码 居然可以有这么多的知识点 涉及到JSONP 以及...
    Katherine的小世界阅读 4,572评论 0 4
  • 家人们晚上好,周一学习活法3个小结其中德重于才给我感触颇深,德是人生必备良药,一个人的成功离不开德,要以德服人,古...
    张伟99阅读 1,135评论 0 0
  • 1.数字认知 姐姐这两天学五六,还不太会,写一半又要画画了,不够专注 弟弟最近喜欢画圆圈圈,大圈圈小圈圈 2.绘画...
    二宝妈妈upupup阅读 2,915评论 0 0
  • 擦拭几套家私,洗刷几件衣件,留下地板明天收拾,又理出一大堆曾经牛叉的物品,当年号称万能充的电夹,现在只有无能,夹充...
    失业中年男阅读 1,630评论 0 0

友情链接更多精彩内容