百度智能搜索框模拟(原创)


<input id="testID" type="text"/>
<ul id="test1">

</ul>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script >
var queryURL="http://suggestion.baidu.com/su?json=1&p=3&sid=&cb=?&_"+new Date()/1;
$(function(){
$("#testID").keyup(function(){
search();
});
});

function search(){
$("#test1").empty();
$.getJSON(queryURL+"&wd="+$("#testID").val(),function(data){
for(var i in data.s)
{
$("#test1").append("<li>"+data.s[i]+"</li>");
}
});
}
</script>

百度智能搜索框模拟(原创),布布扣,bubuko.com

时间: 2024-10-10 06:05:20

百度智能搜索框模拟(原创)的相关文章

ajax+JQuery实现类似百度智能搜索框

最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先展示下效果图:(ps:图片中的文字是参考的,不具有任何的攻击意义) 项目的目录结构: 一:首先是login.jsp页面 需要注意的是我是通过js的类库(Jquery)封装的ajax,需要在webcontent下面导入jquery jar包,代码如下: <%@ page language="ja

Jquery实现类似百度的搜索框

最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上显示匹配项列表,实现该功能输入框需要绑定"input"事件,然后向后台发送异步请求,将数据展示在页面上.使用鼠标或上下键选择匹配项,点击搜索或"Enter"键后搜索具体结果.这里要用到两个异步请求,第一个请求匹配项,第二个请求搜索结果.键盘,鼠标以及输入框的事件都要监听

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

js 百度云搜索框

// ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个搜索框,调用搜索API搜索所有公开分享文件// To add a search frame that calls some api for searching some public shared files in BaiduYun cloud netdisk. // @include /https

如何制作一个必应(百度)搜索框?

代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <meta charset="UTF-8"> <title>Document</title> <style type="text/css">     *{         margin:0

使用javascript ajax C#实现类似百度的搜索框效果

先看一下最终效果  样式不太好看,但是功能是完全可行的,在文本框中输入文字之后,会实现自动搜索的功能. 首先介绍一下原理: 文本框下方是一个div,里面是一个ul标签,初始状态此ul中不包含任何的li标签. 当文本框文字改变的时候,使用ajax把文本框内容取出来,传递到后台,在后台中从数据库查询数据并把结果返回到前台页面. 返回的结果格式设置为:A,B,C,D:以便在前台实现字符串分割. 前台页面把返回的字符串切分成数组,依次遍历并给ul添加li节点. 具体方法: ①前台布局就不多说了 ,重要的

Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)

此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkText.tagName 的实战实例源代码演示 Selenium 元素定位的 8 种方法,源代码测试通过日期为:2015-01-26 00:18,请知悉.注意:其中通过 tagName 定位元素时,返回的是一个 WebElement 的数组,需要根据实际的测试需求对其进行进一步的处理. 希望能对初学 S

模拟百度搜索框,输入时显示历史记录

今天写了个小demo,利用本地存储的特点,模拟百度搜索框. 主要知识是利用本地存储的特点,模拟百度搜索时的历史记录显示. 主要HTML代码为 <div class="search"> <input type="text"/> <button class="btn">搜索</button> </div> <ul class="hidden"> <li&

模拟百度搜索框

在使用百度搜索是,页面会根据我们输入的内容自动匹配一些候选内容. 实现的主要过程主要是: 1.用户在输入一个字符结束后,在onkeyup事件中获取用户输入的内容. 2.根据获取到的内容向服务器发送请求,匹配到相似的数据,存到数组中. 3.判断数组是否有内容,如果有数据,就在搜索框下面遍历匹配到的内容(候选项). 首先,要写好页面布局 html部分 <html> <head> <meta http-equiv="Content-Type" content=&