HTML5加百度的搜索框代碼
在我們?nèi)粘;ヂ?lián)網(wǎng)使用中,百度搜索引擎的影響力非常強(qiáng)大。因此,我們可以將百度搜索框嵌入我們的網(wǎng)頁中,方便用戶使用。下面是嵌入百度搜索框的HTML5代碼。
首先,我們需要在頭部加入JavaScript代碼,引用百度搜索框的API。代碼如下:
<script src="http://suggestion.baidu.com/js/3.0/suggest_src.js"></script>接著,在頁面中添加一個(gè)搜索框的表單。代碼如下:
<form action="https://www.baidu.com/s" target="_blank"> <label for="search-keyword">請輸入搜索關(guān)鍵詞</label> <input type="text" id="search-keyword" name="wd"> <button type="submit">搜索</button> </form>這里form標(biāo)簽的action屬性指定了搜索結(jié)果的頁面地址,target屬性指定了搜索結(jié)果頁面的打開方式,"_blank"表示在新頁面中打開。 在輸入搜索關(guān)鍵詞時(shí),我們需要使用百度的自動提示功能,以提供更加智能的搜索建議。因此,我們需要在頁面加載完成后,使用JavaScript代碼啟用自動提示。代碼如下:
<script> window.onload = function(){ var searchBox = document.getElementById("search-keyword"); var sug = new BaiduSuggestion({ "input": searchBox, "zIndex": 1000, "cache": false }); } </script>這里我們使用了BaiduSuggestion對象,傳入一個(gè)包含搜索框和一些參數(shù)的配置對象。 最后,在頁面底部添加維護(hù)百度搜索引擎的聲明。代碼如下:
<p><a target="_blank"><strong>百度</strong></a>,一站式搜索。</p>這里我們使用p標(biāo)簽包裹聲明語句,并添加了一個(gè)鏈接到百度首頁。 通過這樣的HTML5代碼,我們可以嵌入百度搜索框,并提供更加優(yōu)秀的用戶體驗(yàn)。