百度搜索框实例
- 思路：
- 给input添加鼠标聚焦事件和键盘抬起事件；目的：获取数据，绑定数据
- 判断：判断文本框中是否存在内容，如果不存在，就不进行获取数据等操作，ul要隐藏，如果存在数据，ul要显示；
- 通过jQuery中的ajax来获取数据,绑定数据
- 前后台的数据交互，通过ajax怎样获取数据
- 请求地址:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=周星驰&cb=xxx- 地址url:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su，是一个百度服务器上的一个地址，在这个地址上已经有强大的数据库被编写好，怎样去获取相对应的数据，通过wd=后面的赋值，来匹配已经编好的内容，wd=怎么设置，是通过ajax上的data属性设置 - data:
"wd="+val指的是将wd的值赋为文本框中的内容，通过改变文本框中的文字，来获取不同的数据 - dataType:jsonp，指的是跨域获取，返回的数据格式为json格式；
- json：参数用来设置cb，在默认情况下为callback，此时的值为随机数；
- 地址url:
- 请求地址:
- 添加点击事件，事件委托给最高级body，通过判断事件源来进行相应的操作
- 需求1：当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索
- 判断事件源为a元素，并且a元素的父级为li，这样就代表点击的是列表中的a元素；
- 怎样跳转页面进行搜索
- 代码：
window.open("https://www.baidu.com/s?wd="+$(target).html(),"_blank");，其中https://www.baidu.com/s?wd=为百度搜索的东西，给wd赋值为什么内容，它就相应的跳转到对应的页面，所以只要给wd赋值为列表中内容就行，至于为什么，待以后解答；
- 代码：
- 需求2：当鼠标点击百度一下按钮，开始搜索
- 判断事件源为button元素，然后将文本框内容赋给wd即可；
- 需求3：当点击除了按钮和列表以外的任何点击都让ul隐藏
- 添加代码：
$ul.hide() - 注意：如果此时点击文本框时，会通过冒泡事件，将body点击事件触发，然后执行ul隐藏的代码，会出错，所以必须在此之前，要判断事件源是否为input元素，如果为input则阻断程序执行；此时设置的代码
return false，有三个功能；
- 添加代码：
- 需求1：当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索
- 添加键盘按下事件
- 需求：当按上下键的时候，文本框的内容同步改变，按下enter键，开始搜索,并且让ul隐藏
- 思路：
- 如何判断按下的哪一个键：通过判断事件对象上的keyCode属性，其中：enter键: ,向下键：40，向上键：38；
- 怎样获取列表中的内容，通过全局变量n，当触发一次事件就让n相应的加1或减1，通过给对应的li元素添加一个class名，来改变其背景色；
- 注意点：
- 当按下向下向上键的时候，必须解绑keyup事件，当重新输入内容的时候，也就是触发keydown的时候，除了三个键的情况，其他情况均重新绑定keyup事件；
- 当按下enter键时，跳转新页面后，必须重新赋值n为原始值；
- 重复绑定keyup事件后，要给n重新赋值为原始值；不然n会错乱；
- 在向上向下键的按下过程中，当回到文本框的时候，必须给其赋值为最初输入在文本框内的内容；所以需要建立一个全局的变量，用于保存住最原始的文本框内容；通过if判断，只给其赋值一次，不能重复赋值；
- 给input添加鼠标聚焦事件和键盘抬起事件；目的：获取数据，绑定数据
- 知识点：
- jQuery中在函数中添加代码：
return false的作用有三种：1）阻止程序执行；2）阻止默认事件；3）阻止冒泡；
- jQuery中在函数中添加代码：
- 问题：
- 按下enter键跳转页面后，无法隐藏ul;即使是解绑keyup，也无法隐藏ul；
- 当鼠标滑动到列表项时，对应的背景色会发生改变，但是按下向下上键时，背景色也会变化，二者会同时存在，而真正的百度上，是鼠标浮动事件和向上向下键是配合的；(这个问题可以给li添加mouseover和mouseout事件，而不是利用css中的hover伪元素设置)；
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度搜索框实例</title> <style> *{ margin: 0; padding: 0; list-style: none; } body,html{ height: 100%; } .menu{ width: 100%; height: 32px; background-color: lightslategray; } #wrap{ width: 640px; margin: 10px auto 0; } #logo{ height: 180px; padding-top: 35px; } #logo img{ display: block; width: 270px; height: 129px; line-height: 129px; vertical-align: middle; margin: 0 auto; } #boxbanner{ position: relative; } #boxbanner #txt{ display: inline-block; width: 520px; height: 20px; font-size: 18px; padding: 9px 7px; border: 1px solid lightgray; outline: none; box-shadow: none; vertical-align: top; } #boxbanner button{ width: 102px; height: 40px; line-height: 40px; font-size: 18px; text-align: center; background-color: #38f; color: white; box-shadow: none; font-weight: normal; border: 0; padding: 0; cursor: pointer; } #boxbanner ul{ position: absolute; left: 0; top: 40px; width: 637px; display: none; border: 1px solid lightgray; } #boxbanner ul li{ width: 100%; height: 30px; } #boxbanner ul li:hover{ background-color: lavender; } #boxbanner ul li.active{ background-color: lavender; } #boxbanner ul li a{ display: block; color: black; font-size: 14px; line-height: 30px; text-decoration: none; padding-left: 7px; } </style> </head> <body> <div class="menu"></div> <div id="wrap"> <div id="logo"><img src="img/logo.png" alt="loge"></div> <div id="boxbanner"> <input type="text" id="txt"><button id="btn">百度一下</button> <ul id="ul"> <!--<li><a href="javascript:;">百度一下</a></li> <li><a href="javascript:;">百度一下</a></li> <li><a href="javascript:;">百度一下</a></li> <li><a href="javascript:;">百度一下</a></li> <li><a href="javascript:;">百度一下</a></li>--> </ul> </div> </div> <script src="JS库/jquery.js"></script> <script> //请求地址:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=周星驰&cb=xxx //上面的地址是百度的数据库中添加的一个后台大数据；目的就是当你搜索的时候，能够匹配到相应的信息； /*UL显示的情况 * 1）当聚焦的时候，如果文本框内有内容，ul显示，否则，隐藏 * 2）在编辑内容的时候，如果有内容，ul显示，否则隐藏，同时，编辑内容的时候，列表跟着同步改变； * 3）当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索 * 4）点击百度一下按钮，开始搜索,并且让ul隐藏 * 5）点击页面任何地方的时候，ul都隐藏 * 6）当按上下键的时候，文本框的内容同步改变，按下enter键，开始搜索 * */ //获取元素 var $txt=$("#txt"); var $ul=$("#ul"); var $aLi=null; var $n=-1; //oldval目的是保存最初的文本框内容 var oldval=null; //1 添加聚焦事件，键盘抬起事件 $txt.on("focus keyup",getData); function getData() { var val=$(this).val(); console.log(2) if(val.length){ //获取数据，绑定数据 //请求地址:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=周星驰&cb=xxx //url为问号前面的地址，data来设置wd=xxx,dataType为跨域获取，jsonp用来修改cb，如果不修改，则默认为callback，值为随机数； $.ajax({ url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", data:"wd="+val, dataType:"jsonp", jsonp:"cb", success:function (data) { //绑定数据 var str=""; for(var i=0; i<data.s.length; i++){ str+=`<li><a href="javascript:;">${data.s[i]}</a></li>`; } $ul.html(str); //数据更新后要重新获取数据，因为jQuery中没有DOM映射； $aLi=$ul.children("li"); } }); $ul.show(); }else{ $ul.hide(); } } //2 添加点击事件，事件委托给最高级元素body $("body").on("click",function (e) { var target=e.target; //2.1当鼠标点击列表的时候，对应的内容框变为我们点击的文字，同时开始搜索,并且让ul隐藏 if(target.tagName.toLowerCase()==="a" && target.parentNode.tagName.toLowerCase()==="li"){ $txt.val($(target).html()); window.open("https://www.baidu.com/s?wd="+$(target).html(),"_blank"); } //2.2点击百度一下按钮，开始搜索 if(target.tagName.toLowerCase()==="button"){ window.open("https://www.baidu.com/s?wd="+$txt.val(),"_blank"); } //2.3点击页面任何地方的时候，ul都隐藏，排除txt,button，a if(target.tagName.toLowerCase()==="input"){ //当聚焦input的时候，会默认发生点击事件，所以会发生冒泡，导致ul隐藏 return false;//阻止冒泡 } $ul.hide(); }); //3 当按上下键的时候，文本框的内容同步改变，按下enter键，开始搜索 //注意：jQuery中没有DOM映射； $txt.on("keydown",function (e) { if(e.keyCode===40){ if(!oldval){ oldval=$(this).val(); } //当按下下键时，让对应的li背景色改变，通过n来控制 $(this).off("keyup",getData); $n++; $n%=$aLi.length+1; if($n===$aLi.length){ $aLi.removeClass("active"); $(this).val(oldval); return; } $aLi.eq($n).addClass("active").siblings("li").removeClass("active"); $(this).val($aLi.eq($n).children("a").html()); }else if(e.keyCode===38){ if(!oldval){ oldval=$(this).val(); } //当按下下键时，让对应的li背景色改变，通过n来控制 $(this).off("keyup",getData); if($n===0){ $aLi.removeClass("active"); $(this).val(oldval); $n=-1; return; } if($n<0){ $n=$aLi.length; } $n--; if($n===$aLi.length){ $aLi.removeClass("active"); $(this).val(oldval); return; } $aLi.eq($n).addClass("active").siblings("li").removeClass("active"); $(this).val($aLi.eq($n).children("a").html()); }else if(e.keyCode===13){ window.open("https://www.baidu.com/s?wd="+$(this).val(),"_blank"); $n=-1;//此时$n必须要重新赋值为原始值； }else{ $(this).on("keyup",getData); $n=-1;//此时$n必须要重新赋值为原始值； } }); </script> </body> </html>
百度搜索框复习版
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度搜索框实例复习</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ font: 16px Arial; height: 1000px; } .nav{ width: 100%; height: 32px; border-bottom: 1px solid #ccc; } .sou{ width: 640px; height: 260px; margin: 0 auto; } .sou a{ display: block; width: 270px; margin: 10px auto; height: 129px; text-decoration: none; background: url("img/bd1.png") no-repeat; } .sou p{ width: 640px; height: 40px; margin: 0 auto; } .sou p input{ width: 536px; height: 40px; padding: 9px 48px 9px 7px; border: 1px solid #b8b8b8; box-sizing: border-box; outline: none; box-shadow: none; font: 16px Arial; } .sou p input[type="text"]:focus{ border-color: #38f; } .sou p i{ display: inline-block; width: 18px; height: 16px; background: url("img/02.png") no-repeat; background-position: 0 0; position: absolute; margin-left: -30px; margin-top: 12px; cursor: pointer; } .sou p i:hover{ background-position: 0 -20px; } .sou p span{ display: inline-block; width: 104px; height: 40px; line-height: 40px; font-size: 16px; color: white; text-align: center; background-color: #398bfb; border: 1px solid #398bfb; box-sizing: border-box; vertical-align: top; cursor: pointer; } .sou p span:hover{ background-color: #39f; } .sou ul{ width: 640px; position: absolute; border: 1px solid lightgray; box-sizing: border-box; font-size: 14px; display: none; } .sou ul li{ width: 100%; height: 30px; line-height: 30px; padding-left: 7px; box-sizing: border-box; cursor: pointer; } .sou ul li.active{ background-color: lightsteelblue; } </style> </head> <body> <div class="nav"></div> <div class="sou"> <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_Pclogo_6ysd4c7a&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pc" title="点击一下，了解更多" target="_blank"></a> <p><input type="text" name="search" id="ser"/><i></i><span id="btn">百度一下</span></p> <ul> <!--<li>天空</li>--> </ul> </div> <script src="../toolLibrary/jquery.js"></script> <script> //获取元素 var $oInput=$("#ser"); var $oUl=$(".sou ul"); var $oinputVal=null; var $aLi=null; var data=null; var daLength=null; var n=-1; //1.获取数据 function getData() { //每次事件触发后，重新获取内容； $oinputVal=$oInput.val(); if($oinputVal.length>0){ $.ajax({ url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", type:"get", data:{wd:$oinputVal}, dataType: "jsonp", jsonp:"cb", success:function (val) { data=val.s; daLength=data.length; insertDom(); }, error:function (err) { console.log(err); } }) } } //2.将数据插入页面 function insertDom() { var str=""; $.each(data,function (index,item) { str+=`<li>${item}</li>`; }); $oUl.html(str); $aLi=$oUl.children("li"); //li设置鼠标划上事件； $aLi.mouseover(function () { n=$(this).index(); $(this).addClass("active").siblings("li").removeClass("active"); }).mouseout(function () { n=-1; $(this).removeClass("active"); }); } //3.文本框添加事件 keyEvent(); function keyEvent() { //keyup事件，更新数据，绑定DOM0级事件，不会出现重复绑定的方法； $oInput[0].onkeyup=keyUp; function keyUp(){ //让ul显示 $oUl.show(); //获取新的数据，插入页面中； getData(); } //keydown事件 $oInput.on("keydown",keyDown); function keyDown(e) { //向下为40，向上为38; if(e.keyCode===40 || e.keyCode===38){ $oInput[0].onkeyup=null; if(e.keyCode===40){ console.log("todown"); if(n>=daLength-1){ $aLi.eq(n).removeClass("active"); n=-1; $oInput.val($oinputVal); return; } n++; } if(e.keyCode===38){ console.log("toup"); if(n<=0){ n=daLength; if(n===0){ $aLi.eq(n).removeClass("active"); $oInput.val($oinputVal); return; } } n--; } $aLi.eq(n).addClass("active").siblings("li").removeClass("active"); $oInput.val($aLi.eq(n).html()); set_text_value_position(this, -1); //让文本框内的光标位置在最后面； }else{ //回车键盘码为13；回车跳转页面 if(e.keyCode===13){ toBlank($oInput.val()); } $oInput[0].onkeyup=keyUp; } } //点击事件，事件委托在外围容器上 $("body").click(function (e) { if(e.target.id==="btn"){ toBlank($oInput.val()); } if(e.target.id==="ser"){ getData(); $oUl.slideDown(500); }else{ $oUl.slideUp(300); n=-1; } if(e.target.nodeName==="LI"){ $oInput.val(e.target.innerHTML); toBlank(e.target.innerHTML); } }); } //4.跳转页面 function toBlank(arg) { var t=/^\s+$/.test(arg);//筛选空格，如果为多个空格，页面也不跳转； if(!arg || t) return; window.open("https://www.baidu.com/s?wd="+arg); } //让文本框内的光标位置在最后面； function set_text_value_position(tobj, spos){ if(spos<0) spos = tobj.value.length; if(tobj.setSelectionRange){ //兼容火狐,谷歌 setTimeout(function(){ tobj.setSelectionRange(spos, spos); tobj.focus();} ,0); }else if(tobj.createTextRange){ //兼容IE var rng = tobj.createTextRange(); rng.move('character', spos); rng.select(); } } </script> </body> </html>
网友评论