点击文本框出现暖搜标签实例代码

点击文本框出现热搜标签实例代码
点击文本框出现热搜标签实例代码:
在很多人性化较好的网站，点击搜索文本框的时候，会下拉弹出热门搜索标签，当点击这些标签的时候，会将相应的标签写入搜索框，以便于搜索，下面就是一段这样的实例代码，希望能够给需要的朋友带来帮助。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body 
{
  font-size:12px;
  font-family:Arial;
}
#m_tagsItem 
{
  background:#fff;
  position:absolute;
  top:0px;
  left:0px;
  overflow:hidden;
  width:590px;
  *width:561px;
  width:561px\9;
  padding:10px;
  border:1px solid #ccc;
  z-index:1000;
  display:none;
}
#m_tagsItem p 
{
  text-align:left;
  line-height:22px;
  padding:2px 0;
  margin:0;
  border:0;
}
#m_tagsItem span{font-weight:bold;}
#m_tagsItem a{margin:0 5px;}
.m_tagsname 
{
  color:#999;
  vertical-align:middle;
  font-size:12px;
  text-indent:3px;
  line-height:20px;
}
#tagClose 
{
  font-size:12px;
  color:#888;
  cursor:pointer;
  position:absolute;
  top:2px;
  right:2px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
(function($){ 
  $.fn.bgIframe = $.fn.bgiframe = function (s) { 
    if ($.browser.msie && /6.0/.test(navigator.userAgent)) 
    { 
      s = $.extend({ 
        top: 'auto', // auto == .currentStyle.borderTopWidth 
        left: 'auto', // auto == .currentStyle.borderLeftWidth 
        width: 'auto', // auto == offsetWidth 
        height: 'auto', // auto == offsetHeight 
        opacity: true, 
        src: 'javascript:false;' 
      }, s || {}); 
      var prop = function (n) { return n && n.constructor == Number ? n + 'px' : n; }, 
      html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="' + s.src + '"' + 
      'style="display:block;position:absolute;z-index:-1;' + 
      (s.opacity !== false ? 'filter:Alpha(Opacity=\'0\');' : '') + 
      'top:' + (s.top == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')' : prop(s.top)) + ';' + 
      'left:' + (s.left == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')' : prop(s.left)) + ';' + 
      'width:' + (s.width == 'auto' ? 'expression(this.parentNode.offsetWidth+\'px\')' : prop(s.width)) + ';' + 
      'height:' + (s.height == 'auto' ? 'expression(this.parentNode.offsetHeight+\'px\')' : prop(s.height)) + ';' + 
      '"/>'; 
      return this.each(function () { 
        if ($('> iframe.bgiframe', this).length == 0) 
        this.insertBefore(document.createElement(html), this.firstChild); 
      }); 
    } 
    return this; 
  }; 
})(jQuery); 
jQuery.fn.selectCity = function (targetId) { 
  var _seft = this; 
  var targetId = $(targetId); 
  this.click(function () { 
    var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 
    var A_left = $(this).offset().left; 
    targetId.bgiframe(); 
    targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); 
  }); 
  targetId.find("#tagClose").click(function () { 
    targetId.hide(); 
  }); 
  $(document).click(function (event) { 
    if (event.target.id != _seft.selector.substring(1)) { 
      targetId.hide(); 
    } 
  }); 
  targetId.click(function (e) { 
    e.stopPropagation(); // 2 
  }); 
  return this; 
} 
$(function () { 
  $("#selecttags").selectCity("#m_tagsItem"); 
}); 
//为文本域连续赋值 
function checktag(o) { 
  var tagid = function (id) { return document.getElementById(id); } 
  var tags = []; //存放标签,避免重复加入 
  var tagidSPLITCHAR = ' '; //设定分隔符,根据程序需求可改 
  var d = tagid('selecttags'); 
  if (d.value) 
  tags = d.value.split(tagidSPLITCHAR); 
  var v = o.innerHTML; //如果tag有别的值或者别的非innerHTML里体现的内容 
  var s = tagidSPLITCHAR + tags.join(tagidSPLITCHAR) + tagidSPLITCHAR 
  if (!new RegExp(tagidSPLITCHAR + v + tagidSPLITCHAR, 'g').test(s))
  { 
    s += v; 
  } 
  s = s.replace(new RegExp("(^" + tagidSPLITCHAR + "*|" + tagidSPLITCHAR + "*tagid)", "g"), ''); 
  d.value = s; 
  tags = s.split(tagidSPLITCHAR); 
} 
</script>
</head>
<body>
<input type="text" id="selecttags" name="m_tagsname" class="m_tagsname" style="width: 577px"
value="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value='';this.className='m_tagsname'}">
<div id="m_tagsItem" style="display: none">
  <div id="tagClose"> 关闭</div>
  <p> <span>温馨提示：</span>标签间请用"空格"、"逗号"或"分号"隔开，用简练的词语概括您的博文内容。</p>
  <p>
    <span>热门标签：</span>
    <a href="javascript:void(0)" onclick="checktag(this)">回调函数</a>
    <a href="javascript:void(0)" onclick="checktag(this)">透明度</a>
    <a href="javascript:void(0)" onclick="checktag(this)">定位</a>
    <a href="javascript:void(0)" onclick="checktag(this)">蚂蚁部落一</a>
    <a href="javascript:void(0)" onclick="checktag(this)">div</a>
    <a href="javascript:void(0)" onclick="checktag(this)">css</a>
    <a href="javascript:void(0)" onclick="checktag(this)">javascript</a>
    <a href="javascript:void(0)" onclick="checktag(this)">jquery</a>
    <a href="javascript:void(0)" onclick="checktag(this)">seo</a>
  </p>
  <p> 
    <span>您使用过的标签：</span>
    <a href="javascript:void(0)" onclick="checktag(this)">软件</a>
    <a href="javascript:void(0)" onclick="checktag(this)">Delphi</a>
    <a href="javascript:void(0)" onclick="checktag(this)">博客</a>
    <a href="javascript:void(0)" onclick="checktag(this)">源码</a>
    <a href="javascript:void(0)" onclick="checktag(this)">彩妆</a>
    <a href="javascript:void(0)" onclick="checktag(this)">html教程</a>
    <a href="javascript:void(0)" onclick="checktag(this)">搜索优化</a>
  </p>
</div>
</body>
</html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10626
更多内容可以参阅:http://www.softwhy.com/jquery/
点击文本框出现暖搜标签实例代码

相关推荐
