百度搜索

案例使用了 本地存儲(chǔ)歷史記錄 搜索聯(lián)想(純前端模擬數(shù)據(jù) 未使用數(shù)據(jù)庫 后續(xù)demo會(huì)使用～)

JavaScript代碼幾乎每行都有注釋 方便閱讀理解思路

github demo 網(wǎng)址 => https://github.com/LanHai1/search-baidu

思路

思路

  • 輸入搜索框 注冊彈起鍵盤事件
    判斷是否文本框?yàn)榭?br> 清空之前聯(lián)想的數(shù)據(jù)
    return出去
    可替換成調(diào)用歷史提示記錄
  • 先清空之前聯(lián)想的數(shù)據(jù)
  • 循環(huán)遍歷聯(lián)想數(shù)據(jù)數(shù)組
    判斷是否存在聯(lián)想數(shù)據(jù)
    indexOf() > -1
    將數(shù)據(jù)通過創(chuàng)建元素追加到頁面中去
    鼠標(biāo)移入高亮
    移出恢復(fù)原來的背景顏色
  • search按鈕注冊點(diǎn)擊事件 保存歷史記錄至本地
    先獲取本地?cái)?shù)據(jù)
    默認(rèn)值 ""
    判斷用戶是否未輸入
    判斷用戶輸入的數(shù)據(jù)是否已經(jīng)存在
    return
    三元表達(dá)式判斷是否有數(shù)據(jù)
    逗號(hào)拼接數(shù)據(jù)
    將新數(shù)據(jù)存放回本地儲(chǔ)存
  • 歷史記錄提示
    給文本框注冊獲取光標(biāo)事件
    先清空之前的歷史記錄提示
    獲取本地?cái)?shù)據(jù)
    默認(rèn)值 ""
    字符串方法 split(",") 逗號(hào)切割字符串
    用變量接收 返回?cái)?shù)組
    循環(huán)遍歷數(shù)組
    將數(shù)據(jù)通過創(chuàng)建元素追加到頁面中去
    鼠標(biāo)移入高亮
    移出恢復(fù)原來的背景顏色
    注冊鼠標(biāo)點(diǎn)擊事件
    將當(dāng)前l(fā)i的值給文本框
    給文本框注冊失去光標(biāo)事件
    設(shè)置延時(shí)器
    因?yàn)槭ス鈽?biāo)事件優(yōu)先執(zhí)行在點(diǎn)擊事件前面
    清空歷史記錄

xmind圖釋

結(jié)構(gòu) 樣式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        input {
            outline: none;
            box-sizing: border-box;
            height: 40px;
            position: absolute;
            z-index: 9;
        }
        
        .clearfix {
            *z-index: 1;
        }
        
        .clearfix::after {
            content: "";
            display: block;
            overflow: hidden;
            clear: both;
            visibility: hidden;
        }
        
        .cont {
            width: 641px;
            margin: 300px auto;
            position: relative;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        #txt {
            width: 537px;
            padding: 10px 80px 10px 7px;
        }
        
        #search {
            width: 104px;
            -webkit-appearance: button;
            -moz-appearance: button;
            line-height: 40px;
            font-size: 16px;
            cursor: pointer;
            color: #000;
            border-left: 0;
            background-image: linear-gradient(135deg, #fff8f8, #d3d3d3);
            right: 0;
        }
        
        .ul_search {
            list-style: none;
            width: 639px;
            display: none;
            border: 1px solid #b6b6b6;
            border-top: 0;
            margin-top: -1px;
            position: absolute;
            top: 40px;
        }
        
        .ul_search>li {
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            cursor: default;
        }
    </style>

</head>

<body>
    <div class="cont clearfix">
        <input type="text" id="txt" class="fl">
        <input type="button" value="百度一下" id="search" class="fl">
        <ul class="ul_search fl" id="ul_box"></ul>
    </div>
    <script src="index.js"></script>
</body>

</html>

JavaScript代碼

/**
 * 獲取id
 * @param {string} id 
 */
function $(id) {
    return document.getElementById(id)
}

// 聯(lián)想數(shù)據(jù)
var keywords = ["林利群", "林利群為什么很黑", "林利群的經(jīng)紀(jì)人是周林林嗎", "林利群是誰", "廣東人", "廣東人愛吃", "廣東人愛吃福建人", "林丹的生平", "JavaScript",
    "Java", "王思聰", "王健林", "社會(huì)王", "隔壁老王", "林綠群", "你打球像蔡徐坤", 'aaa', 'bbb', '王祖藍(lán)', '你打球王祖藍(lán)'
];

// 鍵盤彈起事件
$("txt").onkeyup = function() {
    // 每次彈起之前先清空之前的聯(lián)想
    $("ul_box").innerHTML = ""

    // 為空直接跳出函數(shù)
    if (this.value.length == 0) {
        // 隱藏ul
        $("ul_box").style.display = "none"
        return
    }

    // 循環(huán)遍歷 判斷是否存在聯(lián)想
    for (let i = 0; i < keywords.length; i++) {
        // indexOf => 為空"" 返回0 待處理
        if (keywords[i].indexOf(this.value) != -1) {
            // 存在聯(lián)想 直接渲染頁面
            renderUl(keywords[i])
        }
    }
}

/**
 * 渲染ul下的li
 * @param {array_string} arrString 
 */
function renderUl(arrString) {
    let li = document.createElement("li")
    li.innerHTML = arrString

    // 將li追加至ul里面
    $("ul_box").appendChild(li)

    // 顯示ul
    $("ul_box").style.display = "block"
        // 高亮
    ul_li_syle(li)

    // 點(diǎn)擊 li的值 賦值給 txt
    // 失去光標(biāo)優(yōu)先級(jí)大于點(diǎn)擊 會(huì)先執(zhí)行 
    // 失去光標(biāo)的時(shí)候清空了ul里面的內(nèi)容 所以這個(gè)時(shí)候就獲取不到數(shù)據(jù)了
    // 解決方案 給失去光標(biāo)延時(shí)器
    li.onclick = function() {
        $("txt").value = this.innerHTML
    }
}

/**
 * 高亮
 * @param {element} el 
 */
function ul_li_syle(el) {
    // 高亮
    el.onmouseover = function() {
        this.style.backgroundColor = "#cccccc96"
    }
    el.onmouseout = function() {
        this.style.backgroundColor = "#fff"
    }
}

// 本地存儲(chǔ) -> 歷史記錄

// 搜索后保存歷史記錄至本地
$("search").onclick = function() {
    // 為空不保存
    if ($("txt").value.length == 0) {
        $("ul_box").style.dispaly = "none"
        return
    }
    // 獲取數(shù)據(jù) => 進(jìn)行拼接
    let old_data = localStorage.getItem("search_baidu") || ""

    // 判斷數(shù)據(jù)是否已經(jīng)存在本地
    if (old_data.indexOf($("txt").value) > -1) {
        return
    }

    // 數(shù)據(jù)逗號(hào)拼接
    // 判斷是否右數(shù)據(jù) 拼接處理
    let new_data = old_data ? `${old_data},${$("txt").value}` : $("txt").value

    // 保存數(shù)據(jù)
    localStorage.setItem("search_baidu", new_data)
}

// 獲取光標(biāo) 歷史記錄提示
$("txt").onfocus = function() {
    // 獲取數(shù)據(jù)
    let data = localStorage.getItem("search_baidu")

    // 判斷是否已經(jīng)有歷史記錄
    if (data == null) {
        return
    }
    // 逗號(hào)處理
    let arr_data = data.split(",").reverse()
    for (let i = 0; i < arr_data.length; i++) {
        renderUl(arr_data[i])
    }
}

// 失去光標(biāo) 歷史記錄移除
$("txt").onblur = function() {
    // 延遲執(zhí)行 失去光標(biāo)的優(yōu)先級(jí)大于點(diǎn)擊事件
    setTimeout(() => {
        $("ul_box").innerHTML = ""
        $("ul_box").style.display = "none"
    }, 200)
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容