慕课网

精品课程搜索框制作

搜索框制作

最热最新

慕仙5237505 04:15

最终版：$("#search-input").bind("keyup",function(){ var searchText = $("#search-input").val(); $.get("http://api.bing.com/qsonhs.aspx?q="+searchText,function(d){ var d = d.AS.Results[0].Suggests; var html = ""; for(var i=0; i<d.length; i++){ html += "<li>"+d[i].Txt +"</li>"; } //把交互的数据动态添加到ul下面 $("#search-result").html(html); //服务器有返回结果才展示智能提示 $("#search-suggest").show().css({ position:'absolute', top:$("#search-form").offset().top+$("#search-form").height()+10, left:$("#search-form").offset().left }); },"json"); }); $(document).bind('click',function(){ $("#search-suggest").hide(); }); $(document).delegate('li','click',function(){ //获取下拉框里点击的文本,跳转到指定页面搜索要找的关键字 var word = $(this).text(); location.href= "http://cn.bing.com/search?q="+word; });

查看全部

1 采集收起来源：事件代理及jQuery实现
2018-03-22
慕仙5237505 00:38

事件代理对比delegate 不会传id一般是class 标签名

查看全部

0 采集收起来源：事件代理及jQuery实现
2017-11-21
慕仙5237505 15:24

点击document文档，下拉框消失

查看全部

0 采集收起来源：Ajax原理及jQuery实现
2017-11-21
慕仙5237505 04:18

发送请求地址必须和服务器在同一域名下。 nginx he fiddler 工具设置快速搭建把html页面放api.bing.com域名下

查看全部

0 采集收起来源：Ajax原理及jQuery实现
2017-11-21
慕仙5237505 03:54

ajax 的对比

查看全部

0 采集收起来源：Ajax原理及jQuery实现
2017-11-21
慕仙5237505 06:11

html:

查看全部

0 采集收起来源：jQuery实现事件绑定、DOM操作
2017-11-21
慕仙5237505 13:06

js部分:

查看全部

0 采集收起来源：jQuery实现事件绑定、DOM操作
2017-11-21
慕仙5237505 02:09

js jquery dui对比

查看全部

0 采集收起来源：jQuery实现事件绑定、DOM操作
2017-11-21
慕仙5237505

css 2: .suggest{width:288px; background-color:#fff; border:1px solid #999; } .suggest ul{list-style:none; } .suggest ul li{padding:2px; font-size:14px; line-height:20px; cursor:pointer;} .suggest ul li:hover{text-decoration:underline; background-color:#e5e5e5;} </style> </head> <body> <div class="bg-div"> <div class="box"> <div class="logo"></div> <form> <input type="text" class="text"/> <input type="submit" class="button" value=""/> </form> </div> </div> <div class="suggest" id="search-suggest" > <ul> <li>结果1</li> <li>结果2</li> </ul> </div>

查看全部

0 采集收起来源：智能提示知识点介绍
2018-03-22
慕仙5237505 01:28

css 1: <style type="text/css"> *{padding:0; margin:0;} body{background-color:#333;} .bg-div{width:1228px; height:690px; background-image:url(../img/TB.ico); background-repeat:no-repeat; background-size:100% auto; margin:0 auto; } .box{position:absolute; top:200px; left:300px; } .logo{background-image:url(../img/GM.ico); background-repeat:no-repeat; background-size:100% auto; width:40px; height:40px; float:left; } form{float:left; background-color:#fff; padding:5px;} .text,.button{border:0; float:left;} .text{height:25px; line-height:25px; outline:none; width:250px;} .button{background-image:url(../img/DD.ico); background-repeat:no-repeat; background-size:100%; width:29px; height:29px; } .suggest{width:288px; background-color:#fff; border:1px solid #999; } .suggest ul{list-style:none; } .suggest ul li{padding:2px; font-size:14px; line-height:20px; cursor:pointer;}

查看全部

0 采集收起来源：智能提示知识点介绍
2018-03-22
慕仙5237505 10:07

搜索css部分：

查看全部

0 采集收起来源：智能提示下拉层制作介绍
2017-11-21
慕仙5237505 01:09

开始展示：步骤一

查看全部

0 采集收起来源：智能提示下拉层制作介绍
2017-11-21
慕仙5237505 00:50

写css流程

查看全部

0 采集收起来源：智能提示下拉层制作介绍
2017-11-21
慕仙5237505 01:30

兼容：

查看全部

0 采集收起来源：解决浏览器兼容问题
2017-11-20
慕仙5237505

<meta http-equiv="X-UA-Compatible" content="IE=edge">以最新文档模式渲染，防止ie进入怪异模式，导致图片不够居中，

查看全部

0 采集收起来源：解决浏览器兼容问题
2018-03-22

首页上一页 6 7 8 9 10 11 12 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 具有HTML、CSS样式、Javascript、jQuery基础知识

老师告诉你能学到什么？: 可以利用HTML、CSS样式制作出搜索框效果，并使用Javascript及jQuery代码实现Ajax技术分别实现搜索引擎的制作。 1. 定位元素 2. 输入框、按钮美化 3. 修复IE兼容性问题 4.使用Javascript代码实现Ajax技术 5.使用 jQuery代码实现Ajax技术 6.同源原理