jquery中用jsonp实现搜索框功能(json jquery)

编辑：rootadmin

推荐整理分享jquery中用jsonp实现搜索框功能(json jquery)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jq json,jq jsonp,jquery jsonview,jquery jsonview,jquery写入json文件,json jquery,jquery调用json数据,jquery使用jsonp,内容如对您有帮助，希望把文章链接给更多的朋友！

前面的话：在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统，把之前的源码丢了（前面有个不好的习惯就是把最近在做的东西放桌面）。今天想彻底把这个问题搞明白。

用jquery和ajax进行初步的尝试：

（本代码是参考慕课网，搜索框制作视频制作，有关具体详情请参考视频。自己之前的代码找不到了，之前最先的想法也是来自那里，所以这次直接用那里的代码）

html代码：

css代码：

用jquery来实现效果：在这之前，我们基本上得到了我们想要的图形效果，但是我们在搜索框内输入想要查询的内容这时候是不会有效果的（一般的搜索框效果都是在键盘输入的时候，下面会显示一部分与之关联的关键搜索信息，然后鼠标移动上去点击后会跳到相应链接）。为了一步步验证我们的思路，我们这里修改一下之前的代码。

1、将li标签中的定位去掉；

2、在html中将li标签设置为隐藏。然后我们进行后面的操作。

思考一：如何在键盘输入的时候就显示相关信息（即：li标签中的内容）？

思路：我们先引入jquery，然后文档加载完后执行一个键盘事件，然后在键盘事件中改变相应的css效果

这时候，我们在搜索框中输入内容时，下面会跟着显示对应的搜索（模拟）

思考二：如何实现鼠标点击搜索按钮的时候，会搜索相应的内容？

思路：用鼠标点击事件，让鼠标点击后设置一个地址，点击后直接跳到相应地址，代码实现：

思考三：我们如何在搜索框输入数据时，下面会提示相关搜素信息？思路：我们我们用jquery中的get去实现，参考代码：

到这里，按理来说我们这里应该可以得到我们想要的结果了，但是，找了好久都没有发现哪里错了。视频里面接着描述了用JSONP来进行跨域操作，但是我也按视频中的操作，始终得不到我想要的结果，于是我埋头去看《javascript高级程序设计》，去找关于jsonp的用法

关于jsonp：关于jsonp，《javascript高级程序设计》一书中介绍的比较少，下面是我看了之后的归纳。 jsonp的全写是 json with padding，其出现是为了解决各主浏览器的之间的同源策略的问题，一般来说ServerA 域下面的页面是没有办法与非 ServerA 下面的资源进行沟通，而 Html 的<script>元素是个例外，利用 <script> 这个开源策略，网页可以从其他来源动态获取 json数据，而这种模式就是所谓的 JSONP，用 jsonp 抓到并不是真正意义上的 json 而是任意的 javascript ,它是直接通过 javascript 编译器编译而不是 json 解释器。更多关于json的知识请点击：

既然书上没有写，那就去网上搜索资源。这里截取一段和文章前面有关的信息的代码：

通过这段代码来修改我们自己的代码：

更多思考：我们可以在前面增加一些判断，让我们的效果实现起来更完美

经过测试前面的代码，发现还有不足，进一步修改代码：

到这里，我们的效果差不多就出来了，效果截图：

源代码已托管至：　　这些天学习的新东西挺多的，现在有一个想法就是把最近学的东西把它串联起来，做一个综合的效果。参考必应网站，真的有好多东西已经可以做出来了，接下来的一段时间就好好的把自己想要做的效果实现好。

标签: json jquery

本文链接地址:https://www.jiuchutong.com/biancheng/379334.html 转载请保留说明！

上一篇：Jquery AJAX POST与GET之间的区别详细介绍

下一篇：用自定义图片代替原生checkbox实现全选,删除以及提交的方法(自定义图片制作软件)