API之模擬百度搜索

時間 2019-11-18

標籤 api 模擬百度搜索简体版

原文原文鏈接

步驟

定義一個keyWords字符串數組
獲取全部須要的元素（獲取文本框）
文本框註冊鍵盤擡起事件，以及書寫事件函數
事件函數中首先要獲取去文本框內輸入的內容
而後建立一個臨時數組，存放對應的數據
把輸入的字符和最開始定義的keyWords數組中的每一項數據作對比，那麼就須要一個循環
若是輸入的字符和數組中每一項數據的0位置上的字符能顧匹配上，那麼就把它放入臨時數組裏
若是文本框內沒有輸入內容或者臨時數組爲空，那麼就不建立div
若是用戶輸入的值和臨時數組裏面的數據相匹配，那麼開始便利臨時數組，建立div，而後把div加入box中
每次鍵盤擡起都判斷有沒有後面加的div，若是有那麼就刪除

代碼以下：數組

<body>
    <div id="box">
        <input type="text" value="" id="txt">
        <input type="button" value="搜索" id="btn">
    </div>
    <script>
        var keyWords = ['小樣酸q糖', '小樣我就這樣', '小機靈鬼', '小仙女', '別---薛之謙', '別那麼驕傲-----金海心', '許嵩----明智之舉', '許仙白娘子', '小龍女楊過', '白羊', '白夜行'];
        var btn = document.getElementById('btn');
        var txt = document.getElementById('txt');
        //註冊鍵盤擡起事件，並書寫事件函數
        txt.onkeyup = function () {
            //獲取文本框輸入的內容
            var text = this.value;
            //建立一個臨時數組，存放對應的數據；
            var tempArr = [];
            //把輸入的字符串和keyWord數組中的數據的每一項做對比
            for (var i = 0; i < keyWords.length; i++) {
                //若是輸入的字符和數組中是0位置出現的能匹配上，就把數據放入臨時數組裏
                if (keyWords[i].indexOf(text) === 0) {
                    tempArr.push(keyWords[i]);//把數據追加到最後
                }
            }
            //臨時數組已經存在
            var box = document.getElementById('box');
            var dv = document.getElementById('dv');
            //每次鍵盤擡起都判斷有沒有dv這個div
            if (dv) {
                //若是有就刪除一次
                box.removeChild(dv);
            }
            //若是文本框是空的或者臨時數組是空的，不用建立div
            if (this.value.length === 0 || tempArr.length === 0) {
                // 判斷頁面中是否有div，有則刪除
                if (dv) {
                    box.removeChild(dv);
                }
                return;
            }
            //若是文本框內的值和臨時數組內的內容相匹配，那麼開始遍歷臨時數組，建立div,而後把div加入到box中
            var divObj = document.createElement('div');
            box.appendChild(divObj);
            divObj.id = 'dv';
            divObj.style.width = '500px';
            divObj.style.border = '1px solid green';
            for (var i = 0; i < tempArr.length; i++) {
                var pObj = document.createElement('p');
                divObj.appendChild(pObj);
                pObj.innerText = tempArr[i];
                pObj.style.margin = '0';
                pObj.style.padding = '0';
                pObj.style.marginLeft = '5px';
                pObj.style.marginTop = '5px';
                pObj.style.cursor = 'pointer';
                pObj.onmouseover = function () {
                    this.style.backgroundColor = '#def';
                }
                pObj.onmouseout = function () {
                    this.style.backgroundColor = '';
                }
            }


        }
    </script>

</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。