搜索框中我們輸入一些字或者字母，為何下面就會有一些自動補齊的相關搜索，比如我在搜索輸入框中輸入一個字母e，下面就會出現餓了么，e租寶，ems等相關的搜索鏈接。然后經過百度，發現原來很多廠商的服務器早已經為我們弄好了。
我們只需要寫個輸入框，然后獲取輸入框里的信息，將信息打包，請求服務器，然后獲取數據再顯示在界面上就OK了。想想是不是很簡單呢，因為我們不需要做很多相關的算法和處理因為服務器早已經做好了，我們做的只是記住調用的方法，然后調用就行了。
然后我找到了的bing必應，微軟旗下的搜索引擎，試着做了一個。
效果如下：
看了效果圖大家可能會問了，為什么網址是api.bing.com這個類似cn.bing.com(必應的網址)，這個就涉及到跨域了，因為JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象，相關信息大家可以百度，這里就不詳細闡述了，我只說一點，跨域問題只存在於你的JS代碼中，服務器是沒有跨域問題的
然后我這里使用的是Fiddler來解決跨域問題，我的理解是它可以幫助你把你本地的文件映射到其它域名下，這樣你的JS代碼就可以訪問這個域名下的JS對象了，當然這只是在欺騙你本地的JS代碼，讓你的JS代碼誤以為你們是一個域名下的，然后可以去訪問，服務器那邊並不會產生什么影響。這個只是我本人的看法，有表述不正確的地方還望大家指出，謝謝大家。
說了這么多，大家應該也有一個對搜索框制作的模糊印象了吧，下面是具體代碼：
bing_search_index.html:
需要引入jquery庫
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <!-- 兼容IE --> 10 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 13 <title>bing search</title> 14 15 <link rel="stylesheet" type="text/css" href="style.css"> 16 17 </head> 18 19 <body> 20 21 <div class="bg-div"> 22 23 <div class="search-box"> 24 25 <div class="logo"></div> 26 27 <form id="search-form"> 28 29 <input type="text" class="search-input-text" id="search-input" name="q" /> 30 31 <input type="submit" class="search-input-button" value=""/> 32 33 </form> 34 35 </div> 36 37 </div> 38 39 <div class="suggest" id="search-suggest" style="display:none;"> 40 41 <ul id="search-result"> 42 43 <li>搜索結果1</li> 44 45 <li>搜索結果2</li> 46 47 <li></li> 48 49 </ul> 50 51 </div> 52 53 <script type="text/javascript" src="js/jquery1-11-1.js"></script> 54 55 <script type="text/javascript" src="js/script.js"></script> 56 57 </body> 58 59 </html>
$(document).ready(function(){ $('#search-input').bind('keyup', function() { var jqueryInput = $(this); //用戶輸入 var searchText = jqueryInput.val(); //請求必應的服務器，獲得相關搜索信息 $.get('http://api.bing.com/qsonhs.aspx?q=' + searchText,function(json){ //服務器返回的信息 var data = json.AS.Results[0].Suggests; var html=""; //將服務器返回的信息加到li標簽里 for(var i = 0; i < data.length; i++){ html += '<li>' + data[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, // $('#search-form').offset().left的結果是468.5 // 不知道為什么left不加4只有464.25的寬度 position: 'absolute' }); },'json'); }); $(document).bind('click',function(event) { // 隱藏搜索結果 $('#search-suggest').hide(); }); $(document).delegate('li', 'click', function(event) { var li_text = $(this).text();//取到li里的文本 //返回結果的鏈接 location.href = 'http://cn.bing.com/search?q=' + li_text; }); });
js/script.js:
1 *{ 2 3 margin: 0; 4 5 padding: 0; 6 7 } 8 9 body{ 10 11 background-color: #333; 12 13 } 14 15 16 17 .bg-div{ 18 19 /*bing的背景圖*/ 20 21 background-image: url(images/bg.jpg); 22 23 width: 1325px; 24 25 height: 630px; 26 27 margin: 0 auto; 28 29 } 30 31 32 33 .logo{ 34 35 /*bing的logo*/ 36 37 background-image: url(images/logo.png); 38 39 width:107px; 40 41 height: 53px; 42 43 float: left; 44 45 } 46 47 48 49 form{ 50 51 float: left; 52 53 background-color: #fff; 54 55 padding: 5px; 56 57 margin-left: 20px; 58 59 } 60 61 62 63 .search-input-text{ 64 65 /*消除input的邊框*/ 66 67 border: 0; 68 69 width: 400px; 70 71 height: 36px; 72 73 line-height: 36px; 74 75 float: left; 76 77 /*去掉文本框點擊后顯示的高亮效果*/ 78 79 outline: none; 80 81 } 82 83 84 85 .search-input-button{ 86 87 border: 0; 88 89 /*bing的搜索按鈕圖*/ 90 91 background-image: url(images/search.png); 92 93 width: 36px; 94 95 height: 36px; 96 97 float: left; 98 99 cursor: pointer; 100 101 } 102 103 104 105 .search-box{ 106 107 position: absolute; 108 109 top: 30%; 110 111 left: 25%; 112 113 } 114 115 116 117 .suggest{ 118 119 width: 446px; 120 121 background-color: #fff; 122 123 border: 1px solid #999; 124 125 } 126 127 128 129 .suggest ul{ 130 131 list-style: none; 132 133 margin: 0; 134 135 padding: 0; 136 137 } 138 139 140 141 .suggest ul li{ 142 143 padding: 3px; 144 145 font-size: 14px; 146 147 line-height: 25px; 148 149 cursor: pointer; 150 151 list-style: none; 152 153 } 154 155 156 157 .suggest ul li:hover{ 158 159 text-decoration: underline; 160 161 background-color: #e5e5e5; 162 163 }
對Fiddler不熟悉的可以看看這里：
1.打開fiddler,然后請求http://api.bing.com/bing_search_index.html
2.在fiddler里找到那個請求
3.再在右邊對其添加規則