百度搜索提示框

最新推荐文章于 2022-03-21 21:49:05 发布
最新推荐文章于 2022-03-21 21:49:05 发布
阅读量147 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/luludehuhuan/p/7815250.html
版权
<!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" maxlength="8048" value="" placeholder="" baiduSug=1 οnmοuseοver="focus()">
            <input type="submit" class="sou2" value="百度一下" >
        </form>
    </div>
 
 
 
<!-- 百度搜索提示 -->
<script charset="gbk" src=" http://www.baidu.com/js/opensug.js"></script> <!-- we124.com/libs/js/opensug.js(无logo) -->
<script> 
    document.getElementById("sou1").focus();  
    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> 
 
WEB前端学习交流群20 103791667
 

转载于:https://www.cnblogs.com/luludehuhuan/p/7815250.html

weixin_30364147
关注
仿百度搜索提示框效果
weixin_30455023的博客
02-08 154
<!doctype html><html><head> <meta charset="UTF-8"> <title>百度搜索提示框</title> <style> * { margin: 0;padding: 0; outline: none;} .searc...
写一个百度提示框
typeofstring的博客
08-21 322
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> 百度提示框 #divkeywor
2021-09-28爬取百度首页链接地址
热门推荐
ludong4836339的博客
09-28 1万+
# encoding=utf-8 import requests from bs4 import BeautifulSoup resp=requests.get('https://www.baidu.com') #请求访问百度首页 print(resp) #打印请求结果的状态码 print(resp.content) #打印请求到的网页圆满， bsobj=BeautifulSoup(resp.content,'.
JavaScript实现百度搜索框提示
Alanx的博客
03-21 4194
JavaScript
百度搜索框提示功能
颤抖的羽翼
07-13 3985
1、简单方式 方便的将“百度搜索框（带提示功能）”直接加入到您的网页中。 将以下代码加入到您的网页中， 即可获得带有“搜索框提示”功能的百度搜索框。 HTML代码： 提示：Javascript代码请添加到网页中标签的后面。 2、添加方式 快速的为页面中已有的“百度搜索框”或其他文本输入框添加“百度搜索框提示”功能。 第一步：为
js实现百度搜索提示框
10-20
在本文中，我们将探讨如何使用JavaScript来实现一个类似百度搜索提示框的功能。这个功能常见于许多网站的搜索框，当用户输入关键词时，它会显示与输入相关的建议搜索词。以下是一个简化的实现过程和关键代码片段。 ...
jQuery百度搜索提示框效果代码.zip
07-05
在本项目中，"jQuery百度搜索提示框效果代码.zip"是一个包含实现百度搜索提示效果的JavaScript代码资源。这个效果主要用于提升用户体验，当用户在输入框中输入内容时，系统会实时显示与输入内容相关的建议搜索项，...
jQuery百度搜索提示框效果代码
12-16
jQuery百度搜索提示框效果代码是一种常见的前端开发技术，它用于实现类似百度搜索引擎那样的实时搜索建议功能。这个功能在用户输入关键词时，会在输入框下方显示与输入内容匹配的相关搜索建议，提升用户的搜索体验。...
百度搜索框提示功能简单实现
简单就是美
12-01 1万+
在搜索框中输入的时候会有百度的只能提示。 代码也很简单，整个html只有24行，关键的代码不超过10行。
百度全系APP SDK漏洞–WormHole虫洞漏洞
jltxgcy的专栏
02-18 9427
0x00    我们以百度地图v8.7.0为例来分析百度蠕虫漏洞，apk下载地址为https://github.com/jltxgcy/AppVulnerability/Baidu_Maps_v8.7.0.apk。    使用Android Killer来打开这个apk，Android Killer下载地址为http://pan.baidu.com/s/1jGQUzwa。    我们先讲述如何在代
“百度搜索框提示”代码
简单就是美
05-13 7866
百度提供了2种自定义调用的方法
调用百度搜索框作为搜索提示
岁月如歌去，十年弹指间
12-03 2784
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
android searchbox,Android中全局搜索（QuickSearchBox）详解（二）
weixin_29655399的博客
05-27 474
1. 标题：应用程序如何全面支持搜索2. 引言：如果想让某个应用程序支持全局搜索，必须对这个应用程序进行一系列配置，并实现可被外界访问的内容提供者向搜索应用程序(QuickSearchBox)提供搜索結果，根据配置信息，应用程序可被搜索框架识别为搜索源，搜索应用程序(QuickSearchBox)也可以通过解析配置信息组拼成URI请求应用的ContentProvider获取搜索結果。3. 配置实现...
Combox 实现百度收索框效果
weixin_30432179的博客
05-23 165
标题中所谓百度收缩框效果，就是在输入数据的时候，自动提示，来张图就明白了： 用Combox来实现这个功能只是需要设置三个A开头的属性就OK了：AutoCompleteSource、AutoCompleteMode、AutoCompleteCustomSource AutoCompleteSource属性的设置 获取或设置一个值，该值指定用于自动完成的完成字符...
百度搜索栏历史记录(test)
baicuimeng9549的博客
01-22 236
这是一个正在测试中的百度历史记录栏 .ss{ width: 644px; margin:0 auto; } input{ width: 480px; height: 20px; padding: 9px 48px 9px 7px; } ...
Android爬坑之旅之FileProvider（Failed to find configured root that contains）
weixin_34082789的博客
01-18 1162
最近在测试FileProvider相关功能的时候，在从自定义相册选择图片通过FileProvider来获取content uri的时候程序突然崩溃了，报出了 Failed to find configured root that contains xxxx 复制代码的错误，一开始以为是自己的配置出错了，但是参照官方文档改来改去仍然没有任何作用，通过绞尽脑汁地排查，终于发现了错误原因，并找到了正确的...
app python java_APP自动化（java和python）——python操作百度浏览器
weixin_39738115的博客
12-09 73
from appium importwebdriverimporttimedesired_caps={'platformName': 'Android','deviceName':'8DF6R17503000072','platformVersion': '8.0.0',"unicodeKeyboard":"true","resetKeyboard":"true",'appPackage': 'c...
PHP+Ajax实现百度搜索下拉提示框实例与代码
本文档主要介绍了如何使用PHP、MySQL和AJAX技术来实现一个仿照百度搜索功能的下拉自动提示框。这个项目包含三个关键文件：`rpc.php`，`index.htm` 和数据库表单（未提供文件名，但提到是SQL文件）。开发者需要将SQL...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值