CSS3搜索框代码,并实现百度站内搜索

作者: Arvin Chen 分类: Wordpress 来源: Break易站(www.breakyizhan.com)

我们知道,百度现在全面要支持https,不过百度的站内搜索暂时不支持https,所以加了https的站长们要实现百度的站内搜索,可以用另外一种方法实现,而这里也给大家一个好看的搜索框,如break易站上面header的搜索框一样。大家把form代码写在相应的位置即可实现。

CSS3搜索框代码,并实现百度站内搜索

CSS3搜索框代码FORM的html代码

<form onsubmit="submitFn(this, event);"> 
  <div class="search-wrapper">   
   <div class="input-holder">
	<input type="text" class="search-input" placeholder="请输入关键字" />
	<button class="search-icon" onclick="return searchToggle(this, event);"><span></span></button>
   </div>
   <span class="close" onclick="return searchToggle(this, event);"></span>		      
   <div class="result-container"></div>
  </div>
</form>

CSS3搜索框代码代码并加入了百度站内搜索

记得把下面的yourID换成自己百度站内搜索的ID。

<!---搜索框JS--->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function searchToggle(obj, evt){
var container = $(obj).closest('.search-wrapper');
if(!container.hasClass('active')){
container.addClass('active');
evt.preventDefault();
}
else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
container.removeClass('active');
// clear input
container.find('.search-input').val('');
// clear and hide result container when we press close
container.find('.result-container').fadeOut(100, function(){$(this).empty();});
}

}
function submitFn(obj, evt){
var value = $(obj).find('.search-input').val().trim();
//_html = "Yup yup! Your search text sounds like this: ";
if(!value.length){
_html = "Yup yup! 不能为空,我的朋友 :D";
$(obj).find('.result-container').html('<span>' + _html + '</span>');
$(obj).find('.result-container').fadeIn(100);
evt.preventDefault();
}
else{ 
window.open('http://zhannei.baidu.com/cse/search?s=yourID&entry=1&q='+value+'&nsid=1'); 
}
}
</script>
  •   本文标题:CSS3搜索框代码,并实现百度站内搜索 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/wpress/4671.html

    "CSS3搜索框代码,并实现百度站内搜索"的笔记

    • MIP实现百度站内搜索代码

      <mip-form method="get" url="http://so.breakyizhan.com/cse/search?s=8641559340064497475&entry=1">
      			<input type="hidden" name="s" validatetarget="s" validatetype="must" placeholder="search" value="8641559340064497475">
      			<input type="hidden" name="entry" validatetarget="entry" validatetype="must" placeholder="search" value="1">
      			<input id="floatleft"  type="text" name="q" validatetarget="q" validatetype="must" placeholder="请输入搜索关键词"><div target="q">搜索不能为空</div><input id="floatleft" type="submit" value="提交">
       </mip-form>
      <script src="https://c.mipcdn.com/static/v1/mip-form/mip-form.js"></script>
      
      mr.arvin 2018年8月23日 下午11:19
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注