課程
/前端開(kāi)發(fā)
/JavaScript
/搜索框制作
不知到問(wèn)題出在何處
2016-06-13
源自：搜索框制作 2-5
正在回答
我是第三行寫錯(cuò)了
Holy_小銀
哈哈 還是自己解決了 但是也被自己蠢哭了
慧女神 提問(wèn)者 回復(fù) Holy_小銀
可以給解么？？困擾我2天了，不知所措
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
.bg
{
background: url(river.jpg);
height:600px;
width:1228px;
margin:0 auto;
}
.logo
background: url(logo.png);
width:107px;
height:53px;
float:left;
.search
position:absolute;
top:200px;
left:340px;
.search-inpu
margin:5px 0 0 10px;
background-color:#fff;
padding:5px;
.search-text
width:300px;
height:25px;
line-height:25px;
border: 0;
outline: none;
.search-btn
background-image: url(search-button.png);
width:29px;
height:29px;
float:right;
cursor:pointer;
.search-suggest
width:341px;
border:#999 solid 1px;
background-color:#FFF;
display:none;
.search-suggest ul
{?
? ? list-style-type:none;margin:0;padding:0;
.search-suggest ul li
font-size:14px;
.search-suggest ul li:hover
background-color:#e5e5e5;
text-decoration: underline;
</style>
</head>
<body>
<div class="bg">
? ?<div class="search" id="search">
? ? ? ? <div class="logo"></div>
? ? ? ? <form class="search-inpu" action="https://cn.bing.com/search" target="_blank" id="search-inpu">
? ? ? ? ? ? ?<input ?type="text" class="search-text" name="q" id="search-txt"/>
? ? ? ? ? ? ?<input ?type="submit" value="" class="search-btn"/>
? ? ? ? </form>
? ?</div>
</div>
? ? <div class="search-suggest" ?id="search-suggest">
? ? ? ? <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 type="text/javascript">
? $('#search-txt').bind('keyup',function(){
?var ResultInput=$(this);
?var Inputxt=$('ResultInput').val();
?
?$.get('http://api.bing.com/qsonhs.aspx?q='+Inputxt,function(data){
? var d=data.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({
"top":$('#search').offset().top+44,
"left":$('#search').offset().left+116,
"position":'absolute',
});
?},'json');
? });
??
? $(document).bind('click',function(){
?$('#search-suggest').hide(); ?
? $(document).delegate('li','click',function(){
?var ?keyword=$(this).text();
?location.+keyword;
</script>
</body>
</html>
代碼貼出來(lái)~
舉報(bào)
本課程從簡(jiǎn)入深講解搜索框的制作，學(xué)習(xí)JQ與JS實(shí)現(xiàn)Ajax技術(shù)的不同點(diǎn)
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-10-27
2016-06-15
哈哈 還是自己解決了 但是也被自己蠢哭了
2016-06-14
可以給解么？？困擾我2天了，不知所措
2016-06-14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
.bg
{
background: url(river.jpg);
height:600px;
width:1228px;
margin:0 auto;
}
.logo
{
background: url(logo.png);
width:107px;
height:53px;
float:left;
}
.search
{
position:absolute;
top:200px;
left:340px;
}
.search-inpu
{
float:left;
margin:5px 0 0 10px;
background-color:#fff;
padding:5px;
}
.search-text
{
width:300px;
height:25px;
line-height:25px;
border: 0;
outline: none;
}
.search-btn
{
background-image: url(search-button.png);
width:29px;
height:29px;
border: 0;
float:right;
cursor:pointer;
}
.search-suggest
{
width:341px;
border:#999 solid 1px;
background-color:#FFF;
display:none;
}
.search-suggest ul
{?
? ? list-style-type:none;margin:0;padding:0;
}
.search-suggest ul li
{
font-size:14px;
padding:5px;
cursor:pointer;
}
.search-suggest ul li:hover
{
background-color:#e5e5e5;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="bg">
? ?<div class="search" id="search">
? ? ? ? <div class="logo"></div>
? ? ? ? <form class="search-inpu" action="https://cn.bing.com/search" target="_blank" id="search-inpu">
? ? ? ? ? ? ?<input ?type="text" class="search-text" name="q" id="search-txt"/>
? ? ? ? ? ? ?<input ?type="submit" value="" class="search-btn"/>
? ? ? ? </form>
? ?</div>
</div>
? ? <div class="search-suggest" ?id="search-suggest">
? ? ? ? <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 type="text/javascript">
? $('#search-txt').bind('keyup',function(){
?var ResultInput=$(this);
?var Inputxt=$('ResultInput').val();
?
?$.get('http://api.bing.com/qsonhs.aspx?q='+Inputxt,function(data){
? var d=data.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({
"top":$('#search').offset().top+44,
"left":$('#search').offset().left+116,
"position":'absolute',
});
?},'json');
? });
??
? $(document).bind('click',function(){
?$('#search-suggest').hide(); ?
? });
??
? $(document).delegate('li','click',function(){
?var ?keyword=$(this).text();
?location.+keyword;
});
</script>
</body>
</html>
2016-06-14
代碼貼出來(lái)~