当前位置：首页 > news >正文

网站css是什么百度搜索推广怎么做

news 2025/7/4 23:03:14

网站css是什么,百度搜索推广怎么做,二级建造师报考条件2021考试时间,天涯论坛一、百度搜索常用api 百度搜索常用api 一、搜索关键字自动补全 （一）数据源 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd关键词&json1（二）代码可以使用前端插件： Bootstrap-3-Typeahead bootst…

一、百度搜索常用api

百度搜索常用api

一、搜索关键字自动补全

（一）数据源

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&json=1

（二）代码

可以使用前端插件：
Bootstrap-3-Typeahead
bootstrap-suggest-plugin （推荐）
例子：这个是bootstrap-suggest-plugin 中的deom
deom （推荐）

其他例子，需要导入相关的js、css。这里不提供了

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="keywords" content=""><meta name="description" content=""><title>搜索自动补全</title><link href="/css/bootstrap.min.css?v=3.3.7" rel="stylesheet"/><link href="/css/font-awesome.min.css?v=4.7.3" rel="stylesheet"/><!-- bootstrap-table 表格插件样式 --><link href="/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.18.3" rel="stylesheet"/><link href="/css/animate.min.css?v=20210831" rel="stylesheet"/><link href="/css/style.min.css?v=20210831" rel="stylesheet"/><link href="/ruoyi/css/ry-ui.css?v=4.7.3" rel="stylesheet"/></head>
<body class="gray-bg"><div class="wrapper wrapper-content animated fadeInRight"><div class="row"><div class="col-sm-6"><div class="ibox float-e-margins"><div class="ibox-title"><h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5></div>  <div class="ibox-content"><p>展示下拉菜单按钮。</p><div class="row"><div class="col-lg-6"><div class="input-group"><input type="text" class="form-control" id="suggest-demo-1"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle" style="height: 31px" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div></div></div></div><p>不展示下拉菜单按钮。</p><div class="row"><div class="col-lg-6"><div class="input-group"><input type="text" class="form-control" id="suggest-demo-2"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div></div></div></div><p>前端json中获取数据</p><div class="row"><div class="col-lg-6"><div class="input-group"><input type="text" class="form-control" id="suggest-demo-3"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle" style="height: 31px" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div><!-- /btn-group --></div></div></div><h3>百度搜索</h3><p>支持逗号分隔多关键字</p><div class="row"><div class="col-lg-6"><div class="input-group" style="width: 300px;"><input type="text" class="form-control" id="baidu"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle" style="height: 31px" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div><!-- /btn-group --></div></div></div><h3>淘宝搜索</h3><p>支持逗号分隔多关键字</p><div class="row"><div class="col-lg-6"><div class="input-group" style="width: 400px;"><input type="text" class="form-control" id="taobao"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle" style="height: 31px" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div><!-- /btn-group --></div></div></div><hr><div class="form-group"><label class="font-noraml">相关参数详细信息</label><div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest</a></div></div></div></div></div><div class="col-sm-6"><div class="ibox float-e-margins"><div class="ibox-title"><h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5></div>  <div class="ibox-content"><p>通过数据属性的基本示例。</p><div class="row"><div class="col-lg-6"><input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" /></div></div><hr><p>通过javascript的基本示例。</p><div class="row"><div class="col-lg-6"><input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/></div></div><hr><p>通过javascript的复杂示例。</p><div class="row"><div class="col-lg-6"><input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/></div></div><hr><p>后台url中获取简单数据</p><div class="row"><div class="col-lg-6"><input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/></div></div><hr><div class="form-group"><label class="font-noraml">相关参数详细信息</label><div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead</a></div></div></div></div></div></div></div><script> var ctx = "\/"; var lockscreen = null; if(lockscreen){window.top.location=ctx+"lockscreen";} </script><a id="scroll-up" href="#" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a><script src="/js/jquery.min.js?v=3.6.0"></script><script src="/js/bootstrap.min.js?v=3.3.7"></script><!-- bootstrap-table 表格插件 --><script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3"></script><script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.18.3"></script><script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.18.3"></script><!-- jquery-validate 表单验证插件 --><script src="/ajax/libs/validate/jquery.validate.min.js?v=1.19.3"></script><script src="/ajax/libs/validate/jquery.validate.extend.js?v=1.19.3"></script><script src="/ajax/libs/validate/messages_zh.js?v=1.19.3"></script><!-- bootstrap-table 表格树插件 --><script src="/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.18.3"></script><!-- 遮罩层 --><script src="/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script><script src="/ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script><script src="/ajax/libs/layer/layer.min.js?v=3.5.1"></script><script src="/ajax/libs/layui/layui.min.js?v=2.6.8"></script><script src="/ruoyi/js/common.js?v=4.7.3"></script><script src="/ruoyi/js/ry-ui.js?v=4.7.3"></script><script src="/ajax/libs/suggest/bootstrap-suggest.min.js?v=0.1.29"></script><script src="/ajax/libs/typeahead/bootstrap-typeahead.min.js?v=4.0.2"></script><script type="text/javascript">var testBsSuggest = $("#suggest-demo-1").bsSuggest({url: ctx + "demo/form/userModel",idField: "userId",keyField: "userName"}).on('onDataRequestSuccess', function (e, result) {console.log('onDataRequestSuccess: ', result);}).on('onSetSelectValue', function (e, keyword) {console.log('onSetSelectValue: ', keyword);}).on('onUnsetSelectValue', function (e) {console.log("onUnsetSelectValue");});var testBsSuggest = $("#suggest-demo-2").bsSuggest({url: ctx + "demo/form/userModel",showBtn: false,idField: "userId",keyField: "userName"}).on('onDataRequestSuccess', function (e, result) {console.log('onDataRequestSuccess: ', result);}).on('onSetSelectValue', function (e, keyword) {console.log('onSetSelectValue: ', keyword);}).on('onUnsetSelectValue', function (e) {console.log("onUnsetSelectValue");});//data 数据中获取var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({indexId: 1,indexKey: 2,data: {'value': [{'userId': '1','userCode': '1000001','userName': '测试1','userPhone': '15888888888'},{'userId': '2','userCode': '1000002','userName': '测试2','userPhone': '15888888888'},{'userId': '3','userCode': '1000003','userName': '测试3','userPhone': '15888888888'},{'userId': '4','userCode': '1000004','userName': '测试4','userPhone': '15888888888'},{'userId': '5','userCode': '1000005','userName': '测试5','userPhone': '15888888888'}],'defaults': 'http://ruoyi.vip'}});//百度搜索测试var baiduBsSuggest = $("#baidu").bsSuggest({allowNoKeyword: false, //是否允许无关键字时请求数据multiWord: true, //以分隔符号分割的多关键字支持separator: ",", //多关键字支持时的分隔符，默认为空格getDataMethod: "url", //获取数据的方式，总是从 URL 获取//new url:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E6%99%AE%E9%87%91&json=1//url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1' + '&wd=',/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/jsonp: 'cb',/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数var i, len, data = {value: []};if (!json || !json.s || json.s.length === 0) {return false;}console.log(json);len = json.s.length;jsonStr = "{'value':[";for (i = 0; i < len; i++) {data.value.push({word: json.s[i]});}data.defaults = 'baidu';//字符串转化为 js 对象return data;}});//淘宝搜索建议测试var taobaoBsSuggest = $("#taobao").bsSuggest({indexId: 2,                 // data.value 的第几个数据，作为input输入框的内容indexKey: 1,                // data.value 的第几个数据，作为input输入框的内容allowNoKeyword: false,      // 是否允许无关键字时请求数据hideOnSelect: true,         // 鼠标从列表单击选择了值时，是否隐藏选择列表multiWord: true,            // 以分隔符号分割的多关键字支持separator: ",",             // 多关键字支持时的分隔符，默认为空格getDataMethod: "url",       // 获取数据的方式，总是从 URL 获取effectiveFieldsAlias: {Id: "序号",Keyword: "关键字",Count: "数量"},showHeader: true,url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/jsonp: 'callback',/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数var i, len, data = {value: []};if (!json || !json.result || json.result.length == 0) {return false;}console.log(json);len = json.result.length;for (i = 0; i < len; i++) {data.value.push({"Id": (i + 1),"Keyword": json.result[i][0],"Count": json.result[i][1]});}console.log(data);return data;}});$('#typeahead-demo-1').typeahead({source: ["ruoyi 1","ruoyi 2","ruoyi 3"]});$('#typeahead-demo-2').typeahead({source: [{"name": "Afghanistan", "code": "AF", "ccn0": "040"},{"name": "Land Islands", "code": "AX", "ccn0": "050"},{"name": "Albania", "code": "AL","ccn0": "060"},{"name": "Algeria", "code": "DZ","ccn0": "070"}]});$.get(ctx + "demo/form/collection", function(data){$("#typeahead-demo-3").typeahead({source: data.value});},'json');</script>
</body>
</html>