suggest 自动提示

YongJie

浏览: 73121 次
性别:
来自: 深圳

最近访客更多访客>>

bruce_ma

caojinqin

woxiaobenbin

pirate4444

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery Safari Ajax IE Chrome

<!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" onkeyup="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);
  }
}
});

function pageload(hash) {
  // alert("pageload: " + hash);
  // hash doesn't contain the first # character.
  // 根據傳回的 hash（錨點），AJAX 置換顯示的內容
  if(hash) {
   // restore ajax loaded state重新讀取指定頁面
   if($.browser.msie) {
    // jquery's $.load() function does't work when hash include special characters like aao.
    hash = encodeURIComponent(hash);
   }
   $("#load").load(hash + ".html");
  } else {
   // start page 如果沒有回傳值，代表已經回到 AJAX 的初始狀態頁，清空顯示的內容
   $("#load").empty();
  }
}

$(document).ready(function(){
  // Initialize history plugin.The callback is called at once by present location.hash.
  // 初始化 history plugin，並設定回傳使用的函數
  $.historyInit(pageload, "jquery_history.html");

  // set onlick event for buttons 設定觸發寫入歷史紀錄條件的按鈕事件
  $("a[rel='history']").click(function(){
   // 取得超連結的錨點
   var hash = this.href;
   hash = hash.replace(/^.*#/, '');
   // moves to a new page.
   // pageload is called at once.
   // hash don't contain "#", "?"
   // 點選 AJAX 頁面時，紀錄位置於瀏覽器的歷史紀錄中
   $.historyLoad(hash);
   return false;
  });
});
</script>
</head>
<body>
<h1>jquery history plugin</h1>
This plugin helps you make your Ajax-driven page available for "Go Back" button and "bookmark" of browser.<br>
source: <a href="jquery.history.js">jquery.history.js</a> (Last Update: 2009/10/14)<br>
<br>
<a href="history/rbbs.cgi">jquery history bbs</a><br>
<br>
Work on IE8, FireFox 4.0, Opera9, Safari 4.0, Chrome 2.0. <br>
<br>
<br>
[<a href="jquery_history_xhtml.html">xhtml 1.0 test</a>]
[<a href="jquery_history_ie7.html">IE7 compatible mode test</a>]
<br>
<hr>
首先建立簡單的 AJAX 超連結：
Ajax load<br>
<a href="#1" rel="history">load 1</a><br>
<a href="#2" rel="history">load 2</a><br>
<a href="#3" rel="history">load 3</a><br>
<a href="#aao" rel="history">load aao</a><br>
<br>
<hr>
Loaded html:<br>
<div id="load"></div>
<hr>
<h1>update history</h1>
<br>
Safari support & bug fix on IE6 was offered by Lincoln Cooper. Thanks.
<br>
<br>
Fix IE6 problem was offered by Anton. Thanks.
<br>
<br>
Support IE8 was offered by Yohann MARTEL. Thanks.
<br>
<br>
2009/06/06<br>
When hash contains "?" char, there was a problem in the interchangeability between browsers.
<a href="http://www.mikage.to/jquery/jquery_history.html#1?aaa">http://www.mikage.to/jquery/jquery_history.html#1?aaa</a> didn't work on IE.
Plugin remove string that following "?" now.<br>
This problem was reported by Chris Pall. Thanks.
<br>
<br>
2009/06/10<br>
History plugin work with "jQuery.noConflict();". NoConflict version works with another framework (prototype, etc...). sample is <a href="jquery_history_noc.html">here</a>.<br>
This problem was reported by Mat Ellis. Thanks.
<br>
<br>
2009/06/21<br>
Iframe src problem patch offered by Francesco Sullo. Thanks.<br>
When hash include special characters like aao, plugin does't work correctly on Firefox/IE. This problem was reported by Peter Nguyen. Thanks.<br>
<br>
<br>
2009/06/22<br>
Chrome/Safari patch offered by Peter Nguyen. Thanks.
<br>
<br>
2009/06/25<br>
Chrome/Safari patch offered by Peter Nguyen. Thanks.
<br>
<br>
2009/09/13<br>
I am sorry for being not able to reply though a lot of mails are gotten. <br>
The BBS was set up. <a href="history/rbbs.cgi">jquery history bbs</a><br>
<br>
In IE8, the plugin breaks when using a DOCTYPE of XHTML 1.0.<br>
This problem patch offered by Jonathan. Thanks.<br>
<a href="jquery_history_ie8.html">This version is here.</a> But this version is not work with HTML 4.0 on IE8.<br>
<br>
<br>
2009/10/13<br>
<a href="http://wp.serpere.info/archives/783">IE8 patch</a> offered by serpere. Thanks.<br>
Now history plugin works at all mode in IE8.
<br>
<br>
2009/10/14<br>
<a href="http://www.mikage.to/jquery/history/rbbs.cgi?id=RA12554211511102038965&focus=1">IE6 secure alert patch</a> offered by Øyvind Smestad. Thanks.<br>
<br>
<br>
<br>

<hr>
<a href="/">mikage's page. (Japanese)</a> > <a href="/jquery/">jquery dev memo. (Japanese)</a>
</body>