下面的代碼用谷歌瀏覽器檢查沒發(fā)現(xiàn)問題，重新看了一遍視頻核對了代碼感覺沒有問題了，html也用fiddler工具提交到了http://api.bing.com下了，但是就是出不來那個智能效果，大神幫幫忙，多謝<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="X-UA-Compatible" content="IE=edge"/>? ? <meta content="text/html; charset=utf-8" http-equiv="content-type" /><title>Document</title><style type="text/css">? ? body{? ? ?background: #333;? ? }? ? .bg_div{? ? ?background-image: url("river.jpg");? ? ?height: 690px;? ? ?width: 1268px;? ? ?margin: 0 auto;? ? ?position: relative;? ? }? ? .logo{? ? ?background-image: url("logo.png");? ? ?height:53px;? ? ?width:107px;? ? ?float: left;? ??? ? ?margin: -5px 18px 0 0;? ? }? ? .search-form{? ? ?float: left;? ? ?background: #fff;? ? ?padding: 5px;? ? ? ?/* width: 388px;*/? ? }? ? .search-text{? ? ?border: 0;? ? ?float: left;? ? ?height: 25px;line-height: 25px;? ? ?outline: none;? ? ?width: 350px;? ? }? ? .search-submit{? ? ?border: 0;? ? ?background-image: url("search-button.png");? ? ?height: 29px;? ? ?width:29px;? ? ?float: left;? ? }? ? .box{? ? ?position: absolute;? ? ?top: 200px;? ? ?left: 400px;? ? }? ? .suggest{? ? ? ? width: 388px;? ? ? ? background: #fff;? ? ? ? border: 1px solid #999;? ? }? ? .suggest ul{? ? ? ? list-style: none;? ? ? ? margin: 0;? ? ? ? padding: 0;? ? }? ? .suggest ul li{? ? ? ? padding: 5px;? ? ? font-size: 12px;? ? ? line-height: 25px;? ? ? cursor: pointer;? ? }? ? .suggest ul li:hover{? ? ? ? background: #ccc;? ? ? ? text-decoration: underline;? ? }</style></head><body><div><div><div></div><form action="https://cn.bing.con/search" target="_blank" id="search-form" ><input type="text" name="q" id="search-input" autocomplete="off"><input type="submit" value=""></form></div></div><div id="search-suggest" style="display:none"><ul id="search-result"><li>搜索結(jié)果1</li><li>搜索結(jié)果2</li></ul></div>? ? <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>? ? <script type="text/javascript">? ? $("#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({? ? ? ? ? ? left:$('#search-form').offset().left,? ? ? ? ? ? top:$('#search-form').offset().top+$('#search-form').height()+10,? ? ? ? ? ? position:'absolute'? ? ? ? });? ? ? ? },'json');? ? ? ?? ? })? ? //事件綁定? ? $(document).bind('click',function(){? ? ? ? $('#search-suggest').hide();? ? })? ? //事件代理? ? $(document).delegate('li','click',function(){? ? ? ? var keyword = $(this).text();? ? ? ? location.+keyword;? ? });? ? </script></body></html>
關(guān)于智能搜索框問題
慕仰0443758
2017-04-01 11:46:02
