正文

模拟百度搜索框

author  author  2022-08-08  359

关键词：

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

实现的主要过程主要是：

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

    }

模拟百度

今天来写下类似于百度搜索的一个东西，获取百度接口，利用jsonp获取百度数据，实现百度框搜索的功能！我是用jq来些的，我们先引入jq。 <scriptsrc="jquery.min.js>还有我们封装的一个jsonp的一个js 这只是个... 查看详情

获取百度地图poi数据三（模拟关键词搜索）

...称，道路名称等。有了这些数据，我们就可以通过代码，模拟我们在百度地图的搜索框中搜索地点，从而获取其返回的POI数据。下面直接上代码~ 一、准备好用于存储数据的数据库表　　查看详情

百度搜索关键字提示跳转

模拟的百度搜索的搜索栏，输入数据时会在百度库里提取关键词数组，加入到输入框下面的列表中，可以回车跳转，点击跳转 css和html部分 js部分查看详情

怎样用javascript模拟点击按钮执行搜索?

...ly上面很奇怪,搜索框和搜索按钮鼠标没反应,于是我想用Js模拟然后执行一个搜索,搜索框我用getElementById可以写改value,但是那个button的搜索怎么去执行呢?源码请去百度听翻了,我不知道这个事件怎样去模拟..1、使用js模拟，其实就... 查看详情

js仿百度搜索框

1.js仿百度搜索框<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>functionshow(json){letoUl=document.getElementById(‘ul1‘);oUl.innerHTML=‘‘;json 查看详情

搜索自动提示的简单模拟jquery

使用jQuery实现类似于百度搜索时的自动完成功能，界面效果所示。首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时... 查看详情

selenium+chrome模拟百度搜索和截图

Selenium+Chrome模拟百度搜索和截图#通过WebDriver操作进行查找#无头浏览器，支持无浏览器操作fromseleniumimportwebdriverimporttimedefmain():#创建浏览器实例driver=webdriver.Chrome()url=http://www.baidu.comdriver.get(url)#打印出wrapper中的文字内容text=dr 查看详情

百度搜索提示框

<!doctypehtml><html><head><metacharset="UTF-8"><title>百度搜索提示框</title><style>*{margin:0;padding:0;outline:none;}.search101{width:650px;margin:300pxauto;font-si 查看详情

javascript_dom百度搜索框

今天给大家带来的事一个简单的百度的历史搜索框，大家在搜索东西的时候，百度会自动给你显示你最近搜索过的一些东西，那这个拿js怎么做呢？我们一起来学习吧这是一个HTML页面：1<!DOCTYPEhtml>2<html>3<head>4<metac... 查看详情

百度搜索框

html样式<divclass="img"></div> <divclass="yi"> <inputtype="text"id="search"value=""/> <inputtype="button"value="百度一下"id="baidu"/> <ul> <li></li> & 查看详情

jq+css模拟模糊搜索下拉框实现

html:@*输入框*@<div><inputtype="text"style="width:85%;height:34px;"onkeyup="InputChange(this)"id="txtInput"></div>@*模拟下拉框*@<divclass="divselect"id="dpSelect"></div>css:/*选择框查看详情

仿百度搜索提示框效果

<!doctypehtml><html><head><metacharset="UTF-8"><title>百度搜索提示框</title><style>*{margin:0;padding:0;outline:none;}.search101{width:650px;margin:300pxauto;font-si 查看详情

js——模拟百度搜索

注意事项：1、for循环移除子节点时，其长度是变化的2、在文档流中，input、img、p等标签与其他标签有3px的距离，利用左浮动，可以消除3px距离3、背景图片定位时，第一个值是x轴方向的值，第二值是y轴方向的值4、大多时候input... 查看详情

原生js模拟百度搜索关键字与跳转

css:ul{　　display:none;}html:<inputtype="text"id="text"/><ulid="list"></ul>JS:<script>　　varoTxt=document.getElementById("text");　　varoUl=document.getElementById("list");　　oTxt.o 查看详情

如何制作一个必应（百度）搜索框？

如何制作一个必应(百度)搜索框?代码如下：<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>Document</title> <styletype="text/css"> *{ margin:0;padding:0;list-st 查看详情

html如何实现圆角的百度搜索框？

<formaction="http://www.baidu.com/baidu"target="_blank"> <inputtype="text"name="word"size="60"style="height:60px;width:1100px;background-color:#9a9a9a26;"> <inputtyp 查看详情

模糊查询（类似百度搜索框）

很常见的搜索框，很常用，总结一下，怕自己忘了,使用的是原生的js。这是原生写的，代码很简单，重要是思路。主要就是用了一个indexOf()，很简单。越简单的东西越难想到，很多人都会想到用正则去做，这样就舍近求远了... 查看详情

如何制作一个必应（百度）搜索框？

代码如下：12345678910111213141516171819202122232425262728293031323334353637383940<meta charset="UTF-8"><title>Document</title><style type="text/css"> &nbs 查看详情