suggest 自动提示

51 阅读 0 评论 34 点赞

我是靠谱客的博主可耐凉面，最近开发中收集的这篇文章主要介绍suggest 自动提示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>suggest 自动提示</title>
<script type="text/javascript" src="http://www.94this.com.cn/myCode/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
var a_i;
function showGs(event){
if($.browser.msie){
var keyStr = event.keyCode;
  }else{
  var keyStr = event.which;
  }

if(keyStr!=38&&keyStr!=40&&keyStr!=13){

  $("#ts").empty();
  var vsGsName=escape($("#sGsName").val());

  if(vsGsName!=""){
   $("#ts").html("正在加载...");
   $.post("http://www.94this.com.cn/myCode/jq_suggest/s.asp",{sGsName:vsGsName},function(data){
    $("#ts").html(unescape(data));
    $("#ts>a").bind("click",function(){
     $("#sGsName").val($(this).text());
     $("#ts").css("display","none");
    });

    $("#ts").css("display","block");
    //初始化全局变量
    a_i=-1;
   });
  }else{
   $("#ts").css("display","none");
  }
}else{
//使用键盘上下键选择
if($("#ts").css("display")=="block"){
   //得到选择列表的长度
   var aLen=$("#ts>a").length;
   var _aLen=Number(aLen)-1;

   if(keyStr==38){//按下键盘向下方向键
    if(a_i>=0&&a_i<=_aLen){
     $("#ts>a").get(a_i).style.backgroundColor="";
    }
    a_i=Number(a_i)-1;
    if(a_i<0){
     a_i=_aLen;
    }
    $("#ts>a").get(a_i).style.backgroundColor="#CCCCCC";
   }else if(keyStr==40){ //按下键盘的向上方向键
    if(a_i>=0&&a_i<=_aLen){
     $("#ts>a").get(a_i).style.backgroundColor="";
    }
    a_i=Number(a_i)+1;
    if(a_i>=aLen){
     a_i=0;
    }
    $("#ts>a").get(a_i).style.backgroundColor="#CCCCCC";
   }else if(keyStr==13){//按下回车键
    var entLiText=$("#ts>a").get(a_i).innerHTML;
    $("#sGsName").val(entLiText);
    $("#ts").css("display","none");
   }
  }
  }
}
</script>
<style type="text/css">
body{
font-size:12px;
}
table{
position:relative;
}
#ts{
display:none;
position:absolute;
/*left:100px;
top:55px;*/
width:200px;
background-color:#FFFFFF;
border:1px solid #CC9900;
text-align:center;
}
#ts a{
display:block;
height:25px;
line-height:25px;
cursor:pointer;
}
#ts a:hover{
background-color:#CCCCCC
}
</style>

</head>
<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="1" style="color:#660000">
<tr>
    <td height="30" colspan="3">输入“中”，“国”，“广州”，“公司”看看</td>
</tr>
<tr>
    <td width="25%" height="30">请输入名称：</td>
    <td width="50%" height="30" align="left">
  <input name="sGsName" type="text" id="sGsName" οnkeyup="showGs(event)" /><div id="ts"></div>
</td>
    <td width="25%"> <a href="http://www.94this.com.cn/article/87.htm">代码下载</a> </td>
</tr>
</table>
</body>
</html>

jQuery.extend({
historyCurrentHash: undefined,
historyCallback: undefined,
historyIframeSrc: undefined,
historyNeedIframe: jQuery.browser.msie && (jQuery.browser.version < 8 || document.documentMode < 8),

historyInit: function(callback, src){
  jQuery.historyCallback = callback;
  if (src) jQuery.historyIframeSrc = src;
  var current_hash = location.hash.replace(/?.*$/, '');

  jQuery.historyCurrentHash = current_hash;
  if (jQuery.historyNeedIframe) {
   // To stop the callback firing twice during initilization if no hash present
   if (jQuery.historyCurrentHash == '') {
    jQuery.historyCurrentHash = '#';
   }

   // add hidden iframe for IE
   jQuery("body").prepend('<iframe id="jQuery_history" style="display: none;"'+
    ' src="javascript:false;"></iframe>'
   );
   var ihistory = jQuery("#jQuery_history")[0];
   var iframe = ihistory.contentWindow.document;
   iframe.open();
   iframe.close();
   iframe.location.hash = current_hash;
  }
  else if (jQuery.browser.safari) {
   // etablish back/forward stacks
   jQuery.historyBackStack = [];
   jQuery.historyBackStack.length = history.length;
   jQuery.historyForwardStack = [];
   jQuery.lastHistoryLength = history.length;

   jQuery.isFirst = true;
  }
  if(current_hash)
   jQuery.historyCallback(current_hash.replace(/^#/, ''));
  setInterval(jQuery.historyCheck, 100);
},

historyAddHistory: function(hash) {
  // This makes the looping function do something
  jQuery.historyBackStack.push(hash);

  jQuery.historyForwardStack.length = 0; // clear forwardStack (true click occured)
  this.isFirst = true;
},

historyCheck: function(){
  if (jQuery.historyNeedIframe) {
   // On IE, check for location.hash of iframe
   var ihistory = jQuery("#jQuery_history")[0];
   var iframe = ihistory.contentDocument || ihistory.contentWindow.document;
   var current_hash = iframe.location.hash.replace(/?.*$/, '');
   if(current_hash != jQuery.historyCurrentHash) {

    location.hash = current_hash;
    jQuery.historyCurrentHash = current_hash;
    jQuery.historyCallback(current_hash.replace(/^#/, ''));

   }
  } else if (jQuery.browser.safari) {
   if(jQuery.lastHistoryLength == history.length && jQuery.historyBackStack.length > jQuery.lastHistoryLength) {
    jQuery.historyBackStack.shift();
   }
   if (!jQuery.dontCheck) {
    var historyDelta = history.length - jQuery.historyBackStack.length;
    jQuery.lastHistoryLength = history.length;

    if (historyDelta) { // back or forward button has been pushed
     jQuery.isFirst = false;
     if (historyDelta < 0) { // back button has been pushed
      // move items to forward stack
      for (var i = 0; i < Math.abs(historyDelta); i++) jQuery.historyForwardStack.unshift(jQuery.historyBackStack.pop());
     } else { // forward button has been pushed
      // move items to back stack
      for (var i = 0; i < historyDelta; i++) jQuery.historyBackStack.push(jQuery.historyForwardStack.shift());
     }
     var cachedHash = jQuery.historyBackStack[jQuery.historyBackStack.length - 1];
     if (cachedHash != undefined) {
      jQuery.historyCurrentHash = location.hash.replace(/?.*$/, '');
      jQuery.historyCallback(cachedHash);
     }
    } else if (jQuery.historyBackStack[jQuery.historyBackStack.length - 1] == undefined && !jQuery.isFirst) {
     // back button has been pushed to beginning and URL already pointed to hash (e.g. a bookmark)
     // document.URL doesn't change in Safari
     if (location.hash) {
      var current_hash = location.hash;
      jQuery.historyCallback(location.hash.replace(/^#/, ''));
     } else {
      var current_hash = '';
      jQuery.historyCallback('');
     }
     jQuery.isFirst = true;
    }
   }
  } else {
   // otherwise, check for location.hash
   var current_hash = location.hash.replace(/?.*$/, '');
   if(current_hash != jQuery.historyCurrentHash) {
    jQuery.historyCurrentHash = current_hash;
    jQuery.historyCallback(current_hash.replace(/^#/, ''));
   }
  }
},
historyLoad: function(hash){
  var newhash;
  hash = decodeURIComponent(hash.replace(/?.*$/, ''));

  if (jQuery.browser.safari) {
   newhash = hash;
  }
  else {
   newhash = '#' + hash;
   location.hash = newhash;
  }
  jQuery.historyCurrentHash = newhash;

  if (jQuery.historyNeedIframe) {
   var ihistory = jQuery("#jQuery_history")[0];
   var iframe = ihistory.contentWindow.document;
   iframe.open();
   iframe.close();
   iframe.location.hash = newhash;
   jQuery.lastHistoryLength = history.length;
   jQuery.historyCallback(hash);
  }
  else if (jQuery.browser.safari) {
   jQuery.dontCheck = true;
   // Manually keep track of the history values for Safari
   this.historyAddHistory(hash);

   // Wait a while before allowing checking so that Safari has time to update the "history" object
   // correctly (otherwise the check loop would detect a false change in hash).
   var fn = function() {jQuery.dontCheck = false;};
   window.setTimeout(fn, 200);
   jQuery.historyCallback(hash);
   // N.B. "location.hash=" must be the last line of code for Safari as execution stops afterwards.
   //      By explicitly using the "location.hash" command (instead of using a variable set to "location.hash") the
   //      URL in the browser and the "history" object are both updated correctly.
   location.hash = newhash;
  }
  else {
    jQuery.historyCallback(hash);
  }
}
});