用JQ寫的智能提示搜索框出了點bug
在輸入框輸入第一個字，下邊的提示框會稍微往左移動了。當繼續輸入時，下面的方框就與輸入框對齊了。找不出Bug，代碼是與老師的一樣。
敲出自己的人生
2017-02-22
4 回答
舉報
0/150
提交
取消
2017-06-05
為什么要重復造輪子呢，智能提示功能還是非常繁瑣復雜的，想實現一個淘寶百度搜索提示功能要花很大功夫，
www.92find.com的搜索提示托管服務，只需你提供提示詞條，及其排序權重，剩下的你都不用操心了，
just hava a try !
2017-06-05
實現一個智能提示功能需要ajax、數據庫、jsp/php、算法等很多知識，
如果數據量大，還需要特殊優化
一個小功能，花費太多時間很不合適
我使用了92find.C#a#O#a#M的搜索框智能提示功能托管服務，
只要一行javascript代碼就可以實現百度、淘寶搜索框提示的全部功能
比如：漢字拼音匹配、拼音前綴匹配、模糊搜索、智能容錯，還可以自定義提示詞匯及其排序權重
花五分鐘我的網站就可以部署同百度、淘寶一樣強大好用的輸入提示功能
同時兼容IE、Firefox、Safari、Chrome、Opera各種瀏覽器
兼容ios、Android、Windows
2017-02-23
這不是logo 右邊margin-right的問題，而是suggest-result ，靜態下顯示沒問題，一跨域就有小Bug，以下是代碼：
<!doctype html>
<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{
?? ?background-image:url(river.jpg);
?? ?width:1228px;
?? ?height:690px;
?? ?margin:0 auto;
?? ?position:relative;
}
.logo{
?? ?background-image:url(logo.png);
?? ?background-repeat:no-repeat;
?? ?width:107px;
?? ?height:53px;
?? ?float:left;
?? ?margin:-4px 18px 0 0;
}
form{
?? ?float:left;
?? ?background-color:#fff;
?? ?padding:5px;
}
.search-input-text{
?? ?border:0;
?? ?float:left;
?? ?height:25px;
?? ?line-height:25px;
?? ?outline:none;
?? ?width:350px;
}
.search-input-button{
?? ?border:0;
?? ?background-image:url(search-button.png);
?? ?width:29px;
?? ?height:29px;
?? ?float:left;
?? ?cursor:pointer;
}
.search-box{
?? ?position:absolute;
?? ?top:200px;
?? ?left:300px;
}
.suggest{
?? ?width:388px;
?? ?background-color:#fff;
?? ?border:1px solid #999;
}
.suggest ul{
?? ?list-style:none;
?? ?margin:0;
?? ?padding:0;
}
.suggest ul li{
?? ?padding:3px;
?? ?font: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 action="https://cn.bing.com/search" target="_blank" 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>
??? </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({
?? ??? ??? ?top:$('#search-form').offset().top+$('#search-form').height()+10,
?? ??? ??? ?left:$('#search-form').offset().left,
?? ??? ??? ?position:'absolute'
?? ??? ?});?? ?
?? ?},'json');
?? ?
});
$(document).bind('click',function(){
??????? $('#search-suggest').hide();
?});
?
?$(document).delegate('li','click',function(){
?? ?var keyword=$(this).text();
?? ?location.+ keyword;?? ?
});
</script>
</body>
</html>
2017-02-22
logo 右邊有margin-right