正文

仿百度搜索提示框效果

Seven077  Seven077  2022-08-22  626

关键词：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度搜索提示框</title>
    <style>
        * { margin: 0;padding: 0; outline: none;}
        .search101 {
            width: 650px;
            margin: 300px auto;
            font-size: 0;
        }
        .sou1 {
            width: 514px;
            height: 40px;
            color: #666;
            font: 16px Microsoft YaHei;
            border: 1px solid rgba(170,170,170,.9);
            border-right: 0;
            border-radius: 2px 0 0 2px;
            background: rgba(255,255,255,.9);
            padding: 0 30px 0 3px;
            vertical-align: top;
            display: inline-block;
            transition: .2s;
        }
        .sou2 {
            width: 100px;
            height: 42px;
            font: 16px Microsoft YaHei;
            color: rgba(255,255,255,.9);
            background: rgba(0,170,240,1);
            border: 0;
            border-left: 1px solid rgba(0,170,240,1);
            border-radius: 0 2px 2px 0;
            margin: 0 0 0 -1px;
            vertical-align: top;
            transition: .3s;
            display: inline-block;
            cursor: pointer;
        }
        .sou2:hover {
            background: rgba(0,140,220,.9);
        }
        .sou1:focus {
            color: #333;
            border: 1px solid rgba(0,170,240,1);
            border-right: none;
        }
    </style>
</head>

<body>
<div class="search101">
    <form action="http://www.baidu.com/baidu" class="search-form" method="" id="search-form">
        <input id="ipt1" name="tn" type="hidden" value="baidu" >
        <input type="text" id="sou1" class="sou1" name="word" baiduSug=1 onmouseover="focus()">
        <input type="submit" class="sou2" value="百度一下" >
    </form>
</div>


<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
<script>
    var txtObj = document.getElementById("alertSpan");

    function show(str){
        txtObj.innerHTML = str;
    }
    var params = {
        "XOffset": 0,                   //提示框位置横向偏移量,单位px
        "YOffset": 0,                   //提示框位置纵向偏移量,单位px
        "width": 204,                   //提示框宽度，单位px
        "fontColor": "#666",            //提示框文字颜色
        "fontColorHI": "#222",          //提示框高亮选择时文字颜色
        "fontSize": "16px",             //文字大小
        "fontFamily": "微软雅黑",       //文字字体
        "borderColor": "#d8d8d8",       //提示框的边框颜色
        "bgcolorHI": "#e8e8e8",         //提示框高亮选择的颜色
        "sugSubmit": true              //在选择提示词条是是否提交表单 
    };
    BaiduSuggestion.bind("ipt1",params,show);
</script>
</body>
</html>

js仿百度搜索框

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

搜索输入框提示--输入延迟，仿自动脑学院

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc=‘../node_modules/jquery/dist/jquery.min.js‘></script><style 查看详情

百度搜索提示框

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

uwp-contentdialog-自定义仿iphone提示框，提示框美化

为了实现我想要的效果花费了我很长时间，唉，当初英语不好好学，翻官网翻了半天才找到，分享给刚入门的新手。首先看一张图片示例，我们要模仿的dialog就是长这样的：做出来的效果图：【代码】XAML：1<GridBa... 查看详情

c#中如何实现百度搜索框的效果

参考技术Ac#本身没这个功能，如果是b/s项目的话需要用html+css+js等前端代码实现，如果是c/s项目则需要使用wpf或者winform 查看详情

vue-resource使用(vue仿百度搜索)

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法(vue仿百度搜索)在输入框中输入a,然后在百度f12==>network==>复制jshttps://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=14 查看详情

设计input搜索框提示文字点击消失的效果

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

类似百度搜索的下拉提示框，复制别人的，改了一下。

jsp代码：在填写上级公司的input框时需要给客户提示已经保存过的相似公司名称，所以在下面加一个id为append的空的div。<divclass="rowcl"> 　　<labelclass="form-labelcol-xs-4col-sm-2"style="text-align:right;">上级公司：</label> ... 查看详情

仿百度壁纸client——实现搜索动画gesturedetector手势识别，动态更新搜索keyword

仿百度壁纸client（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字百度壁纸系列仿百度壁纸client（一）——主框架搭建,自己定义Tab+ViewPager+Fragment仿百度壁纸client（二）——主页自己定义ViewPager广告定时轮播图... 查看详情

百度搜索关键字提示跳转

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

搜索历史功能如何打开

...时显示搜索框提示”都选择“不显示”。默认情况下，在百度主页和搜索结果页上方的搜索框都会显示搜索框提示。如果您不希望显示搜索框提示，可以点击提示框右下角的“关闭”链接，之后您只需要重新启动浏览器就能再次... 查看详情

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

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

百度登录框中，眼睛效果，和提示文字效果怎么产生？

其中最左边的密码提示，与最右边的眼状按钮如何嵌入？代码实现大概是这样的。只要那个眼睛图标你可以找个类似图片，然后通过定位来排版。<!doctype html><html><head><meta http-equiv="content-type" con... 查看详情

仿百度图片毛玻璃效果

<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="description"content="兼容性的局部模糊毛玻璃效果效果-百度图片首页示意»张鑫旭-鑫空间-鑫生活"/><metaname="description"content="张鑫旭we 查看详情

高仿百度搜索引擎

这是百度搜索HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/baiduFirst.css"></head><body> 查看详情

百度地图信息提示框的修改转

...为博主原创文章，未经博主允许不得转载。一个小项目，百度地图的定制，电脑用的是触摸屏，支持手写输入，中文输入直接调用系统的虚拟键盘，手写输入是参考网上高手写的一个控件。百度的信息提示框里的搜索框里要输入... 查看详情

arcgisjs学习笔记2实现仿百度的拖拽画圆

一、前言吐槽一下，百度在国内除了百度地图是良心产品外，其他的真的不敢恭维。在上一篇笔记里，我已经实现了自定义的地图测量模块。在百度地图里面（其他地图）都有一个周边搜索的功能，拖拽画... 查看详情

仿淘宝搜索框

<styletype="text/css"> #search{ margin:100pxauto; width:300px; height:40px; position:relative; } #searchinput{ width:200px; height:20px; } #searchlabel{ position:absolute; left:20px; t 查看详情