仿百度搜尋框

1.設定和搜尋框兩個div

fieldset,input,button,img

ul,ol
#img
#box
#textsearch
#buttonsearch
#buttonsearch:hover
#pop 
#pop ul li 
#pop ul li:hover 

//獲取物件

var box = document.getelementbyid("box");
var text = document.getelementbyid("textsearch");
//模擬從後台獲取到資料
var datas = ["a","ab","abc","abcd","mdzz","abcdefg"];
//使用者輸入時從datas中尋找符合要求的專案存放到乙個新陣列中
text.onkeyup = function () 
} console.log(filterarr);
//根據匹配陣列建立結構之前判斷一下頁面上是否已經存在pop
var popdiv = document.getelementbyid("pop");
if (popdiv) 
//如果沒有匹配項 就不要建立pop
if (filterarr.length === 0) 
//如果是空字串 就不建立了
//if(val.length===0)
if (val === "") 
//根據陣列建立結構
var popdiv = document.createelement("div");
popdiv.id = "pop";
var ul = document.createelement("ul");
//根據過濾後的陣列中的每一項資料建立li
for (var i = 0; i < filterarr.length; i++) 
};

百度搜尋框demo

如下 content type content text html charset utf 8 title q ul ul li ul li hover style 2.步驟二 定義demo函式 分析介面 資料 function demo data 迴圈的li寫入ul ul.innerhtml ht...

仿百度搜尋顯示下拉框（一）

1 邏輯分析 事件分析 在輸入框中輸入值後，下拉框即顯示，根據非同步載入得到的資訊，將資料顯示在下拉框中，此事件為獲得焦點元素事件 此事件我也有點模糊 keyup事件 後台技術分析 獲得到文字框的輸入值name後，我們通過ajax技術，非同步去資料庫查詢資料，這裡我們一般使用模糊查詢like，只要包...

Jsonp原理 百度搜尋框

由於瀏覽器同源策略的限制，不同源的客戶端指令碼在沒明確授權的情況下，不能讀寫對方的資源。但是在實際專案中經常需要跨域進行訪問，jsonp就是一種很好的解決跨域問題的方法。1.web頁面上用script標籤引入js檔案時則不受是否跨域的影響 不僅如此，我們還發現凡是擁有 src 這個屬性的標籤都擁有跨...