一個有用的Javascript,onkeydown and Option selected)

來源:互聯網
上載者:User

某一個有用的Javascript,onkeydown and Option selected人提出的要求,我在網上找的代碼,改了一下,FF和IE都支援
這個指令碼的用處就是你在input 輸入框裡面輸入英文字母(比如D)的時候,旁邊的SELECT裡面有相應這個字母D開頭的就會標藍選中,如果是單選就會出現在最上面,可以應用在郵件系統裡面的輸入郵件地址那裡。

<script type="text/JavaScript">
function smartOptionFinder(oSelect, oEvent) {
 var sKeyCode = oEvent.keyCode;
 var sToChar = String.fromCharCode(sKeyCode);
 if(sKeyCode >47 && sKeyCode<91){
  var sNow = new Date().getTime();
  if (oSelect.getAttribute("finder") == null) {
   oSelect.setAttribute("finder", sToChar.toUpperCase())
   oSelect.setAttribute("timer", sNow)
  } else if( sNow > parseInt(oSelect.getAttribute("timer"))+2000) { //Rest all;
   oSelect.setAttribute("finder", sToChar.toUpperCase())
   oSelect.setAttribute("timer", sNow) //reset timer;
  } else {
   oSelect.setAttribute("finder", oSelect.getAttribute("finder")+sToChar.toUpperCase())
   oSelect.setAttribute("timer", sNow); //update timer;
  }
  var sFinder =  oSelect.getAttribute("finder");
  var arrOpt = oSelect.options
  var iLen = arrOpt.length
  for (var i = 0; i < iLen ; i++) {
   sTest  = arrOpt[i].text
   if (sTest.toUpperCase().indexOf(sFinder) == 0) {
    arrOpt[i].selected = true;
    break;
   }
  }
  
 } else{
  
 }
}
</script>
<form name=formName id="formName">
<select name="userid"   style="width:140px;height:90px" multiple >
<OPTION VALUE="George">George</OPTION>
  <OPTION VALUE="Fred">Fred</OPTION>
  <OPTION VALUE="Ryan">Ryan</OPTION>
  <OPTION VALUE="Angela">Angela</OPTION>
  <OPTION VALUE="Jill">Jill</OPTION>
  <OPTION VALUE="Fred">Fred</OPTION>
  <OPTION VALUE="Ryan">Ryan</OPTION>
  <OPTION VALUE="Angela">Angela</OPTION>
  <OPTION VALUE="Jill">Jill</OPTION>
  <OPTION VALUE="Fred">Fred</OPTION>
  <OPTION VALUE="Ryan">Ryan</OPTION>
  <OPTION VALUE="Angela">Angela</OPTION>
  <OPTION VALUE="Jill">qwill</OPTION>
</select>
<input type="text" onkeydown="smartOptionFinder(document.forms.formName.userid,event);" >
</form>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.