模拟搜索功能
知识点
form提交表单时可以配合"submit"按钮使用
button内嵌标签只能通过如下方式设置，不能用input方式设置
代码如下：
<html>
<head>
<title>bing Search</title>
<style type="text/css">
body {
background-color: #333;
}
.bg-div {
/* 背景图居中显示 */
background: url('image/1.jpg');
width: 100%;
height: 100%;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*生成绝对定位的元素，相对于浏览器窗口进行定位。 */
position: fixed;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" target="_blank" method="GET">
<div class="bg-div">
<input type="button" value="不能嵌套标签"/>
<button><img src="image/1.jpg" width="50px"/> 可以嵌套标签</button>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>
效果如下：
效果图
淘宝搜索
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8;" />
<title>淘宝搜索</title>
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff2') format('woff2'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
body {
font-size: 12px/1.5 tahoma, arial, sans-serif;
}
a {
text-decoration: none;
}
.search-contatiner {
position: relative;
}
.search-tips {
float: right;
padding: 3px 0 0 15px;
}
.search-tips a {
color: #6c6c6c
}
.search-button {
float: right
}
.btn-search {
background: url(image/3.png);
width: 100px;
height: 45px;
background-position: 0 -600px;
border: 0;
cursor: pointer;
}
.search-common-panel {
height: 39px;
background-color: #f50;
overflow: hidden;
padding: 3px 0 3px 77px;
}
.search-common-panel input {
height: 39px;
line-height: 39px;
width: 100%;
border: 0 none;
outline: 0;
background: #FFF;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: 14px;
left: 86px;
z-index: 2;
}
ul {
list-style: none;
display: block;
}
ul,
li {
margin: 0;
padding: 0;
}
.search-list {
position: absolute;
top: 3px;
left: 3px;
width: 72px;
height: 39px;
overflow: hidden;
background: #fff;
border-left: 1px solid #f6f6f6;
border-right: 1px solid #e5e5e5;
}
.search-list li {
display: none;
height: 39px;
line-height: 39px;
overflow: hidden;
text-align: center;
}
.search-list li a {
color: #6c6c6c
}
.search-list .selected {
background: #f6f6f6;
display: block;
}
.trigger-hover {
height: auto;
}
.trigger-hover li {
display: block;
}
</style>
</head>
<body>
<div class="search-contatiner">
<div id="search_tab" class="search-list">
<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 class="search_form" id="search_form" action="https://cn.bing.com/search">
<div id="" class="search-tips">
<a href="#">高级<br />搜索</a>
</div>
<div id="" class="search-button">
<button class="btn-search" type="submit"></button>
</div>
<div id="" class="search-common-panel">
<input type="text" x-webkit-speech="">
<i class="iconfont"></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) {//addEventListener适用于非IE浏览器
el.addEventListener(event, fn, false);
} else if (el.attachEvent) {//attachEvent适用于IE浏览器
el.attachEvent('on' + event, fn);
}
}
addEvent('search_tab', 'mouseover', function () {
if (this.className.indexOf('trigger-hover') < 0) {
this.className += ' trigger-hover';
}
});
addEvent('tab_1', 'mouseover', function () {
if (this.className.indexOf('selected') < 0) {
this.className += ' selected';
}
getDOM('tab_2').className = '';
});
addEvent('tab_1', 'click', function () {
getDOM('search_tab').className = 'search-list';
this.className += ' selected';
});
addEvent('tab_2', 'mouseover', function () {
if (this.className.indexOf('selected') < 0) {
this.className += ' selected';
}
getDOM('tab_1').className = '';
});
addEvent('tab_2', 'click', function () {
getDOM('search_tab').className = 'search-list';
});
</script>
</html>
JavaScript实现搜索框
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bing Search</title>
<!-- 最新版本IE渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #333;
}
.bg-div {
/* 背景图居中显示 */
background: url('image/1.jpg');
width: 100%;
height: 100%;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*生成绝对定位的元素，相对于浏览器窗口进行定位。 */
position: fixed;
}
.logo {
background: url('image/2.png');
width: 60px;
height: 28px;
float: left;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text {
border: 0;
float: left;
height: 28px;
line-height: 28px;
outline: none;
/* 去除高亮显示 */
width: 350px;
}
.search-input-button {
border: 0;
background: url('image/2.png') no-repeat center;
width: 60px;
height: 28px;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-color: aqua;
float: left;
}
.search-box {
margin-top: 250px;
margin-left: auto;
margin-right: auto;
width: 500px;
}
.suggest {
width: 350px;
background-color: #fff;
border: 1 solid #999;
position: absolute;
top: 100px;
left: 100px;
}
.suggest ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
text-decoration: underline;
background-color: #e5e5e5;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form" action="http://cn.bing.com/search" target="_blank">
<input type="text" class="search-input-text" id="search-input" name="p" autocomplete="off" />
<input type="submit" class="search-input-button" value="" />
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display: none;">
<ul id="search-result">
<li>
搜索结果1
</li>
<li>
搜索结果2
</li>
<li>
搜索结果3
</li>
</ul>
</div>
<script type="text/javascript">
var getDOM = function (id) {
return document.getElementById(id);
}
// 可以对同一个对象添加多个事件
var addEvent = function (id, event, fn) {
var el = getDOM(id) || document; // 获取元素dom引用 document表示id为空时的容错代码
// 非ie
if (el.addEventListener) {
el.addEventListener(event, fn, false);
} else if (el.attachEvent) // IE
{
el.attachEvent('on' + event, fn);
}
}
var getElementLeft = function (element) {
var actualLeft = element.offsetLeft; // 距离父元素距离
var current = element.offsetParent; // form 表单到浏览器距离
while (current != null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
var getElementRight = function (element) {
var actualRight = element.offsetRight; // 距离父元素距离
var current = element.offsetParent;
while (current != null) {
actualRight += current.offsetRight;
current = current.offsetParent;
}
return actualRight;
}
// 距离上面距离
var getElementTop = function (element) {
var actualTop = element.offsetTop; // 距离父元素距离
var current = element.offsetParent;
while (current != null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
// 当前例题无法用原生写法实现跨域请求，需要用jquery方式处理
var ajaxGet = function (url, callback) {
var _xhr = null;
if (window.XMLHttpRequest) {
// 非ie
_xhr = new window.XMLHttpRequest();
} else if (window.ActiveXObject) {
_xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.open('GET', url, false);
_xhr.onreadystatechange = function () {
if (_xhr.readyState == 4 && _xhr.readyState == 200) {
callback(JSON.parse(_xhr.responseText));
}
}
_xhr.send(null);
}
// 事件代理函数
var delegeateEvent = function(target,event,fn) {
addEvent(document,event,function(e) {
if(e.target.nodeName == target.toUpperCase()) {
fn.call(e.target);
}
})
}
delegeateEvent('li','click',function() {
var keyword = this.innerHTML;
location.href = 'http://cn.bing.com/search?q='+keyword;
});
addEvent('search-input', 'keyup', function () {
var searchText = getDOM("search-input").value;
//供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
//其实参数都是前端和后台程序员规定的，前端传过去，后端判断获取即可。
var url = "http://api.bing.com/qsonhs.aspx?type=cb&cb=jsonpcallback&q=" + searchText;
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入body，此时调用开始
document.getElementsByTagName('body')[0].appendChild(script);
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';
});
// 回调
function jsonpcallback(data) {
var data = data.AS.Results[0].Suggests;
var html = "";
for (var i = 0; i < data.length; i++) {
html += "<li>" + data[i].Txt + "</li>"
}
getDOM('search-result').innerHTML = html;
};
</script>
</body>
</html>
Jquery实现搜索框
<html>
<head>
<title>bing Search</title>
<!-- 最新版本IE渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
body {
background-color: #333;
}
.bg-div {
/* 背景图居中显示 */
background: url('image/1.jpg');
width: 100%;
height: 100%;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*生成绝对定位的元素，相对于浏览器窗口进行定位。 */
position: fixed;
}
.logo {
background: url('image/2.png');
width: 60px;
height: 28px;
float: left;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text {
border: 0;
float: left;
height: 28px;
line-height: 28px;
outline: none;
/* 去除高亮显示 */
width: 350px;
}
.search-input-button {
border: 0;
background: url('image/2.png') no-repeat center;
width: 60px;
height: 28px;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-color: aqua;
float: left;
}
.search-box {
margin-top: 250px;
margin-left: auto;
margin-right: auto;
width: 500px;
}
.suggest {
width: 350px;
background-color: #fff;
border: 1 solid #999;
position: absolute;
top: 100px;
left: 100px;
}
.suggest ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
text-decoration: underline;
background-color: #e5e5e5;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#search-input").bind('keyup', function () {
var searchText = $("#search-input").val();
$.ajax({
url: 'http://api.bing.com/qsonhs.aspx?type=cb&q=' + searchText,
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
jsonp:'cb',
success: function (d) {
var resut = d.AS.Results[0].Suggests;
var html = '';
for (var i = 0; i < resut.length; i++) {
html += '<li>' + resut[i].Txt + '</li>'
}
$("#search-result").html(html);
$("#search-suggest").show().css({
top: $("#search-form").offset().top + $("#search-form").height() + 10,
left: $("#search-form").offset().left ,
position: 'absolute'
});
}
});
});
});
// 隐藏文本框
$(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>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form">
<input type="text" class="search-input-text" id="search-input" />
<input type="submit" class="search-input-button" value="" />
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display: none;">
<ul id="search-result">
<li>
搜索结果1
</li>
<li>
搜索结果2
</li>
<li>
搜索结果3
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8;" />
<title>淘宝搜索</title>
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff2') format('woff2'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
body {
font-size: 12px/1.5 tahoma, arial, sans-serif;
}
a {
text-decoration: none;
}
.search-contatiner {
position: relative;
}
.search-tips {
float: right;
padding: 3px 0 0 15px;
}
.search-tips a {
color: #6c6c6c
}
.search-button {
float: right
}
.btn-search {
background: url(image/3.png);
width: 100px;
height: 45px;
background-position: 0 -600px;
border: 0;
cursor: pointer;
}
.search-common-panel {
height: 39px;
background-color: #f50;
overflow: hidden;
padding: 3px 0 3px 77px;
}
.search-common-panel input {
height: 39px;
line-height: 39px;
width: 100%;
border: 0 none;
outline: 0;
background: #FFF;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: 14px;
left: 86px;
z-index: 2;
}
ul {
list-style: none;
display: block;
}
ul,
li {
margin: 0;
padding: 0;
}
.search-list {
position: absolute;
top: 3px;
left: 3px;
width: 72px;
height: 39px;
overflow: hidden;
background: #fff;
border-left: 1px solid #f6f6f6;
border-right: 1px solid #e5e5e5;
}
.search-list li {
display: none;
height: 39px;
line-height: 39px;
overflow: hidden;
text-align: center;
}
.search-list li a {
color: #6c6c6c
}
.search-list .selected {
background: #f6f6f6;
display: block;
}
.trigger-hover {
height: auto;
}
.trigger-hover li {
display: block;
}
</style>
</head>
<body>
<div class="search-contatiner">
<div id="search_tab" class="search-list">
<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 class="search_form" id="search_form" action="https://cn.bing.com/search">
<div id="" class="search-tips">
<a href="#">高级<br />搜索</a>
</div>
<div id="" class="search-button">
<button class="btn-search" type="submit"></button>
</div>
<div id="" class="search-common-panel">
<input type="text" x-webkit-speech="">
<i class="iconfont"></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) {//addEventListener适用于非IE浏览器
el.addEventListener(event, fn, false);
} else if (el.attachEvent) {//attachEvent适用于IE浏览器
el.attachEvent('on' + event, fn);
}
}
addEvent('search_tab', 'mouseover', function () {
if (this.className.indexOf('trigger-hover') < 0) {
this.className += ' trigger-hover';
}
});
addEvent('tab_1', 'mouseover', function () {
if (this.className.indexOf('selected') < 0) {
this.className += ' selected';
}
getDOM('tab_2').className = '';
});
addEvent('tab_1', 'click', function () {
getDOM('search_tab').className = 'search-list';
this.className += ' selected';
});
addEvent('tab_2', 'mouseover', function () {
if (this.className.indexOf('selected') < 0) {
this.className += ' selected';
}
getDOM('tab_1').className = '';
});
addEvent('tab_2', 'click', function () {
getDOM('search_tab').className = 'search-list';
});
</script>
</html>
浙公网安备 33010602011771号