模拟百度搜索框

来源：互联网发布：c语言整型运算符编辑：程序博客网时间：2024/05/16 06:07

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

实现的主要过程主要是：

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);        }    }

0 0