三、jQuery--jQuery实践--搜索框制作
【摘要】
input标签讲解
<input/>作为按钮的type属性：button、submit（后面会有二者对比分析）
（交互时的效果跟浏览器以及操作系统相关）
<input/>的局限性
<input/>是自闭合标签（不能嵌套其他的标签），所以不能定义复杂样式按钮，所谓复杂的样式，一般指图文混杂的按钮，如下图所示：
如果想实现复杂的按钮样式，我们可以选择使用bu...
input标签讲解
<input/>作为按钮的type属性：button、submit（后面会有二者对比分析）
（交互时的效果跟浏览器以及操作系统相关）
<input/>的局限性
<input/>是自闭合标签（不能嵌套其他的标签），所以不能定义复杂样式按钮，所谓复杂的样式，一般指图文混杂的按钮，如下图所示：
如果想实现复杂的按钮样式，我们可以选择使用button标签。
搜索框中的form标签<form></form>
<form>基本构成
action属性：决定了表单会被提交到服务器的哪个端口
target属性：决定了页面打开方式
method属性：默认使用get即可
<input/>提交按钮的默认行为：
当<input/>标签的type="submit"时，可以提交表单内容到服务器
此时按钮必须放置在要提交的表单元素内，也就是<form>标签内
实例一：实现简单的搜索框
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>bing search</title> <style type="text/css"> body{background-color: #333;} .bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;} .search-form{float: left; background-color: #fff;padding:5px;} .search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;} .search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0} .search-box{position:absolute;top:150px;left: 200px; } </style> </head> <body> <div class="bg-div"> <div class="search-box"> <div class="logo"></div> <form class="search-form" action="https://cn.bing.com/search" target="_blank"> <input type="text" class="search-text" name="q"/> <input type="submit" class="search-button" value=""/> </form> </div> </div> </body> </html>
实例二：实现带有智能提示的搜索框
需要掌握的知识点：
借助jQuery&JS完成动态效果
事件绑定和事件代理
AJAX（）用于和服务器直接的信息交换
（注意：AJAX发送请求的URL与服务器地址必须是同一域名下，要解决跨域问题，如果了解websever技术，可以使用nginx和fiddler工具设置）
jQ版：
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8" /> <title>bing search</title> <style type="text/css"> body { background-color: #333; } .bg-div { position: relative; background-image: url(river.jpg); width: 1228px; height: 690px; margin: 0 auto; } .logo { background-image: url(logo.png); height: 53px; width: 107px; float: left; margin: -4px 18px 0 0; } .search-form { float: left; background-color: #fff; padding: 5px; position:relative; } .search-text { height: 25px; line-height: 25px; float: left; width: 350px; border: 0; outline: none; } .search-button { background-image: url(search-button.png); width: 29px; height: 29px; float: left; border: 0; } .search-box { position: absolute; top: 150px; left: 200px; } .suggest { width: 388px; background-color: #fff; border: 1px solid #999; } .suggest ul { list-style-type: none; margin: 0; padding: 0; } .suggest ul li { padding: 3px; font-size: 14px; line-height: 25px; cursor: pointer; } .suggest ul li:hover { background-color: #ccc; text-decoration: underline; } </style> </head> <body> <div class="bg-div"> <div class="search-box"> <div class="logo"></div> <form class="search-form" id="search-form" action="https://cn.bing.com/search" target="_blank"> <input type="text" class="search-text" name="q" id="search_input" autocomplete="off" /> <input type="submit" class="search-button" value="" /> </form> </div> </div> <div class="suggest" id="search-suggest" style="display:none"> <ul id="search-result"> <li>搜索结果1</li> <li>搜索结果2</li> </ul> </div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $('#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>'; } $('#search-result').html(html); $('#search-suggest').show().css({ position:'absolute', top:$('#search-form').offset().top+$('#search-form').outerHeight(), left:$('#search-form').offset().left }); }, 'json'); }); $(document).bind('click',function(){ $('#search-suggest').hide(); }) $(document).delegate('li','click',function(){ //事件代理 var keyword = $(this).text(); location.href = 'http://cn.bing.com/search?q='+keyword; }) </script> </body> </html>
JS版：
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8" /> <title>bing search</title> <style type="text/css"> body { background-color: #333; } .bg-div { position: relative; background-image: url(river.jpg); width: 1228px; height: 690px; margin: 0 auto; } .logo { background-image: url(logo.png); height: 53px; width: 107px; float: left; margin: -4px 18px 0 0; } .search-form { float: left; background-color: #fff; padding: 5px; position: relative; } .search-text { height: 25px; line-height: 25px; float: left; width: 350px; border: 0; outline: none; } .search-button { background-image: url(search-button.png); width: 29px; height: 29px; float: left; border: 0; } .search-box { position: absolute; top: 150px; left: 200px; } .suggest { width: 388px; background-color: #fff; border: 1px solid #999; } .suggest ul { list-style-type: none; margin: 0; padding: 0; } .suggest ul li { padding: 3px; font-size: 14px; line-height: 25px; cursor: pointer; } .suggest ul li:hover { background-color: #ccc; text-decoration: underline; } </style> </head> <body> <div class="bg-div"> <div class="search-box"> <div class="logo"></div> <form class="search-form" id="search-form" action="https://cn.bing.com/search" target="_blank"> <input type="text" class="search-text" name="q" id="search_input" autocomplete="off" /> <input type="submit" class="search-button" value="" /> </form> </div> </div> <div class="suggest" id="search-suggest" style="display:none"> <ul id="search-result"> <li>搜索结果1</li> <li>搜索结果2</li> </ul> </div> <script> var getDOM = function(id) { return document.getElementById(id); } var addEvent = function(id, event, fn) { var el = getDOM(id) || document; if (el.addEventListener) { el.addEventListener(event, fn, false); } else if (el.attachEvent) { el.attachEvent('on' + event, fn); } } var getElementLeft = function(element) { var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current != null) { actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } var getElementTop = function(element) { var actualTop = element.offsetTop; var current = element.offsetParent; while (current != null) { actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; } var ajaxGet = function(url, callback) { var _xhr = null; if (window.XMLHttpRequest) { _xhr = new window.XMLHttpRequest(); // 在非IE浏览器下 使用new关键字实例化MLHttpRequest() } else if (window.ActiveXObject) { //在IE浏览器下使用ActiveXObject _xhr = new ActiveXObject("Msxml2.XMLHTTP"); } _xhr.onreadystatechange = function() { if (_xhr.readyState == 4 && _xhr.status == 200) { callback(JSON.parse(_xhr.responseText)); } } _xhr.open('get', url, false); _xhr.send(null); } var delegateEvent = function(target,event,fn){ // 事件代理 addEvent(document,event,function(e){ if(e.target.nodeName == target.toUpperCase()){ fn.call(e.target); } }); } addEvent('search_input', 'keyup', function() { var searchText = getDOM('search_input').value; ajaxGet('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>'; } getDOM('search-result').innerHTML=html; getDOM('search-suggest').style.top = getElementTop(getDOM('search-form')) + 38 + 'px'; getDOM('search-suggest').style.left = getElementLeft(getDOM('search-form')) + 'px'; getDOM('search-suggest').style.position = 'absolute'; getDOM('search-suggest').style.display = 'block'; }); }); delegateEvent('li','click',function(){ var keyword = this.innerHTML; location.href = 'http://cn.bing.com/search?q='+keyword; }); </script> </body> </html>
实例三：淘宝搜索框制作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝搜索框</title> <style> body { font: 12px/1.5 tahoma, arial, sans-serif; } a { text-decoration: none; } .search-tips { float: right; padding: 2px 0 0 5px; } .search-tips a { color: #6c6c6c; } .searc-button { float: right; } .btn-search { width: 120px; height: 40px; font-size: 18px; font-weight: 700; color: #fff; cursor: pointer; background-color: #ff4200; border: 0; } .btn-search:hover { background-color: #f52b00; } .search-common-panel { height: 34px; background-color: #f50; overflow: hidden; padding: 3px 0 3px 77px; position: relative; } .search-common-panel input { height: 32px; line-height: 32px; width: 100%; border: none; outline: 0; background-color: #fff; } .search-common-panel i { width: 25px; height: 27px; background: url('1.png'); background-repeat: no-repeat; position: absolute; top: 5px; left: 80px; z-index: 2; } .search-list { position: absolute; z-index: 2; top: 11px; left: 11px; overflow: hidden; width: 73px; height: 32px; border: 1px solid #f6f6f6; background-color: #fff; } .search-list ul { list-style-type: none; display: block; margin: 0; padding: 0; } .search-list li { display: none; overflow: hidden; text-align: center; height: 34px; line-height: 34px; } .search-list ul li a { font-size: 15px; } .search-list .selected { background-color: #f6f6f6; display: block; } .trigger-hover { height: auto; } .trigger-hover li { display: block; } </style> </head> <body> <div class="search-container"> <div class="search-list" id="search-tab"> <ul> <li id="tab_1" class="selected"><a href="#">宝贝</a></li> <li id="tab_2"><a href="#">店铺</a></li> </ul> </div> <div class="search-pannel"> <form action=""> <div class="search-tips"><a href="#">高级<br />搜索</a></div> <div class="searc-button"> <button type="submit" class="btn-search">搜索</button> </div> <div class="search-common-panel"> <input type="text" x-webkit-speech=""> <i></i> </div> </form> </div> </div> </body> <script> var getDOM = function(id) { return document.getElementById(id); } var addEvent = function(id, event, fn) { var el = getDOM(id) || document; if (el.addEventListener) { el.addEventListener(event, fn, false); } else if (el.attachEvent) { el.attachEvent('on' + event, fn); } } addEvent('search-tab', 'mouseover', function() { this.className += ' trigger-hover'; }); addEvent('tab_1', 'mouseover', function() { if (this.className.indexOf('selected') < 0) { this.className += ' selected'; } }) // addEvent('tab_1', 'mouseout', function() { // this.className = ''; // }) addEvent('tab_1', 'click', function() { getDOM('search-tab').className = 'search-list'; getDOM('tab_1').className = ' selected'; }) addEvent('tab_2', 'mouseover', function() { if (this.className.indexOf('selected') < 0) { this.className += ' selected'; } }) // addEvent('tab_2', 'mouseout', function() { // this.className = ''; // }) addEvent('tab_2', 'click', function() { getDOM('search-tab').className = 'search-list'; getDOM('tab_2').className = ' selected'; }) </script> </html>
（代码布局和样式有点冗余，js实现也有点小问题，有时间重新调下~）
其他：IE兼容性视图设置：
文章来源: www.cnblogs.com，作者：姜腾腾，版权归原作者所有，如需转载，请联系作者。
原文链接：www.cnblogs.com/jiangtengteng/p/5431173.html
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）