JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)

更新時(shí)間：2022年03月31日 10:33:25 作者：dengfengling999

本文主要介紹了JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

練習(xí)1

實(shí)現(xiàn)搜索框內(nèi)，輸入相關(guān)數(shù)字，在下方顯示相關(guān)內(nèi)容，模擬百度搜索，詳細(xì)代碼如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 600px;
            height: 500px;
 
            margin: 0 auto;
        }
 
        .show {
            display: none;
            width: 200px;
            height: 300px;
            border: solid 1px black;
        }
    </style>
</head>
 
<body>
    <div class="content">
        <div class="serach">
            <input type="text" id="val" placeholder="請輸入課程" style="width:200px; height:30px;">
            <input type="submit" id="sub">
        </div>
        <div class="show" id="show"></div>
    </div>
 
    <script>
        //以數(shù)組為例，可以連接數(shù)據(jù)庫，進(jìn)行查詢數(shù)據(jù)
        let arr = ['web前端精英特訓(xùn)班 980元', 'HTML核心技術(shù) 199元', 'CSS核心技術(shù) 299元', 'Vue核心技術(shù) 599元',
            'CSS+HTML核心技術(shù) 299元', 'web前端在線商城 99元', 'JavaScript核心技術(shù) 399元', 'JavaScript高級技術(shù) 899元'];
 
        //先完成，展示區(qū)域的顯示與隱藏
        let input = document.getElementById('val');
        let show = document.getElementById('show');
        input.onkeyup = function () {
            //當(dāng)鍵盤抬起時(shí)觸發(fā)
            show.style.display = 'block';
            //input.value和arr的每一項(xiàng)進(jìn)行匹配 用indexOf()：方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置， 匹配到返回下標(biāo)，匹配不到返回-1
            let str = '';
            arr.forEach((item) => {//forEach（）中第一個(gè)元素item，代表數(shù)組中的元素，每一項(xiàng)
                let res = item.indexOf(input.value);
                if (res != -1) {
                    str += '<p>' + item + '</p>';
                }
            })
            //判斷input.value為空或者str數(shù)組中沒有，給用戶一個(gè)提示
            if (!input.value || !str) {
                show.innerHTML = '<p>暫無結(jié)果</p>';
            } else {
                show.innerHTML = str;
            }
 
 
        }
        input.onblur = function () {
            //失去焦點(diǎn)隱藏
            show.style.display = 'none';
            input.value = '';
        }
    </script>
</body>
 
</html>

結(jié)果：

點(diǎn)擊搜索框時(shí)：

練習(xí)2，選項(xiàng)卡，詳細(xì)代碼如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        ul {
            overflow: hidden;
        }
 
        li {
            width: 100px;
            height: 40px;
            background-color: #ccc;
            border: 1px solid #ccc;
            float: left;
            line-height: 40px;
            /*設(shè)置行高等于height高度文字會(huì)垂直居中顯示*/
            text-align: center;
        }
 
        div {
            width: 406px;
            height: 406px;
            border: 1px solid #ccc;
        }
 
        img {
            width: 406px;
            height: 406px;
            display: none;
        }
    </style>
</head>
 
<body>
    <ul>
        <li>大菊</li>
        <li>英短</li>
        <li>美短</li>
        <li>布偶</li>
    </ul>
    <div>
        <img src="images/15.jpg" alt="" style="display: block;">
        <img src="images/16.jpg" alt="">
        <img src="images/17.jpg" alt="">
        <img src="images/18.jpg" alt="">
    </div>
 
    <script>
        //1.移動(dòng)到那個(gè)選項(xiàng)卡上邊，背景顏色要改變，對用的內(nèi)容區(qū)域要顯示
        //移出時(shí)背景顏色恢復(fù)，對應(yīng)內(nèi)容區(qū)域隱藏
        let li = document.getElementsByTagName('li');
        let img = document.getElementsByTagName('img');
        for (let i = 0; i < li.length; i++) {
            //先進(jìn)性元素?cái)?shù)組的下標(biāo)的設(shè)置 在js中獲取數(shù)組的下標(biāo)用 .index
            li[i].index = i;
 
            //移入時(shí)的屬性
            li[i].onmousemove = function () {
                li[i].style.backgroundColor = 'yellow';
 
                //先把所有的圖片進(jìn)行隱藏，再讓對應(yīng)的圖片出現(xiàn)
                for (let j = 0; j < img.length; j++) {
                    img[j].style.display = 'none';
                }
                img[this.index].style.display = 'block';
            }
            //移出時(shí)恢復(fù)原來的顏色
            li[i].onmouseout = function () {
                li[i].style.backgroundColor = '#eee';
            }
        }
 
    </script>
</body>
 
</html>

結(jié)果：