首页 > 代码库 > 模拟百度搜索框

模拟百度搜索框

2024-08-16 16:13:37   224人阅读

在使用百度搜索是，页面会根据我们输入的内容自动匹配一些候选内容。

实现的主要过程主要是：

1、用户在输入一个字符结束后，在onkeyup事件中获取用户输入的内容。

2、根据获取到的内容向服务器发送请求，匹配到相似的数据，存到数组中。

3、判断数组是否有内容，如果有数据，就在搜索框下面遍历匹配到的内容（候选项）。

首先，要写好页面布局

html部分

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟百度搜索框</title>
    <meta charset="utf-8" />
    <style>
        fieldset, img, input, button {
            border: none;
            padding: 0;
            margin: 0;
            outline-style: none;
        }

        ul, ol {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        #box {
            width: 405px;
            margin: 200px auto;
            position: relative;
        }

        #txtSearch {
            float: left;
            width: 300px;
            height: 32px;
            padding-left: 4px;
            border: 1px solid #b6b6b6;
            border-right: 0;
        }

        #btnSearch {
            float: left;
            width: 100px;
            height: 34px;
            font: 400 14px/34px "microsoft yahei";
            color: white;
            background: #3385ff;
            cursor: pointer;
        }

            #btnSearch:hover {
                background: #317ef3;
            }

        #pop {
            width: 303px;
            border: 1px solid #ccc;
            padding: 0px;
            position: absolute;
            top: 34px;
        }

            #pop ul li {
                padding-left: 5px;
            }

                #pop ul li:hover {
                    background-color: #CCC;
                }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" id="txtSearch">
        <input type="button" value="百度一下" id="btnSearch">
        <!--
        <div id="pop">
            <ul>
                <li>候选1</li>
                <li>候选2</li>
                <li>候选3</li>
                <li>候选4</li>
            </ul>
        </div>
        -->
    </div>
</body>
</html>

js部分

这里我们假设已经从服务端获取到了数据

    //从服务端获取到的数据
    var datas = ["a", "abc", "abbbb", "abxxxx", "xyz", "abcdef", "abzzzz"];
    var box = document.getElementById("box");
    var txtSearch = document.getElementById("txtSearch");

    txtSearch.onkeyup = function () {

        //这是数组是用来存储匹配到的数据，用来展示到列表里
        var arr = new Array();
        for (var i = 0; i < datas.length; i++) {
            if (datas[i].indexOf(this.value) >= 0) {
                arr.push(datas[i]);
            }
        }

        //如果有了pop,就把pop删了
        if (document.getElementById("pop")) {
            box.removeChild(document.getElementById("pop"));
        }

        //如果没有内容，什么也不做  注意：这是在删除pop之后判断，因为输入框没有内容匹配到的就是全部数据，列表中展示的就是全部数据
        if (this.value.length <= 0) {
            return;
        }

        //把匹配到数据放到列表里
        if (arr.length > 0) {
            var div = document.createElement("div");
            div.id = "pop";
            var ul = document.createElement("ul");
            div.appendChild(ul);
            for (var i = 0; i < arr.length; i++) {
                var li = document.createElement("li");
                li.innerHTML = arr[i];
                ul.appendChild(li);
            }
            box.appendChild(div);
        }

    }

 

模拟百度搜索框


联系
我们