input觸發彈出層，實現select 效果
在Html中，<input>標籤標示一個文字輸入框，沒有結束標籤。<select>標籤就是彈出下拉框，兩個標籤是相互獨立的，如果把兩者結合在一起，那可能會成為一個新的亮點，增加使用者體驗。其實已經有很多比較成熟的效果，比如google的自動補全效果，在使用者輸入部分關鍵字之後，會彈出相應的下拉選項，這樣都大大提高了使用者的體驗效果。剛好這周，客戶提出要調整輸入框效果，實現input和select相結合。在元件中，這樣的東西並不存在，那麼就需要去自己設計一個，思路大致就是單擊input時,觸發click事件，顯示彈出層內容，類似select效果，同時在改變input裡面文字內容時，對彈出層中顯示內容進行調整，這裡用到了onpropertychange事件。Onpropertychange時間，可以實時監聽input文字域中內容變化。
同時還需要用到<li>元素的onmouseover, onmouseout等其他相關事件。第一步，首先觀察下目前網際網路一些大佬們的處理方式，投資較多的網站12306，我們最親愛的12306，我去，此處省略1000字，，，，
12306的頁面UI效果還算可以，開啟頁面原始碼可以看到它引入了自己定義好的一些樣式，
具體的呼叫事件我們肯定是看不到的，大致事件也差不多就是onclick, Onpropertychange等事件，即使封轉再好，本質還是一個input標籤，除了W3C哪天把它事件給取消了，哈哈，開個玩笑。其實，看下我們最愛去的網站，也是一個自動補全的功能，利用ajax非同步刷新技術。
細心的會發現還有一個語音錄入的功能，像淘寶，天貓這些大型電子商務網站，真的把使用者體驗做的很不錯，贊一個。其他的就不舉例了，太多了…接下來就開始著手設計自己的效果吧……上個效果圖先，
安安靜靜的躺在那裡，是不是有點select標籤的意思，現在去叫醒這個熊孩子，單擊input顯示彈出層，彈出層中內容是採用ajax提交後臺獲取的資料，
採用jsp實現挺簡單的，平時開發一般用到的是都是表單，跟jsp一樣，不過只在外面嵌了一個ifram,為了實現複用，就寫了個單獨的JSP，以後碰到類似的需要，只需要從頁面上獲取ID(需要該效果的ID),配置下ajax提交的資料，就可以輕鬆搞定，是不是很開心加愉快。程式設計師最怕的就是copy,copy,copy!哪我們跟影印機沒啥區別了，你說呢…
實現程式碼如下：
<%@ page contentType="text/html;charset=utf-8"%>
<head>
<title>標題頁</title>
<script type="text/css">
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>div:</td>
<td style="position:relative;">
<input type="text" id="txtRegion" style="width:220px; background-color:#fff;"/>
<div id="divList" style="display: none; position: absolute ; left:228px; top:0px; border: 1px solid black; overflow: hidden; height: 150px; position: absolute; background-color:#FFFFFF; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="contentDiv" style="overflow: auto; padding-left:0; width: 100%; height: 150px; background-color: #FFFFFF; "></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var oRegion = document.getElementById("txtRegion"); //需要彈出下拉列表的文字框
var oDivList = document.getElementById("divList"); //要彈出的下拉列表
var contentD = document.getElementById("contentDiv") ;
//var oClose = document.getElementById("tdClose"); //關閉div的單元格，也可使用按鈕實現
var QueryCode ="COPY_aibsm.enums.sm.receive.support_row" ;
var bNoAdjusted = true;
var html = "" ;
var all_html ="" ;
var colOptions = "" ;
$(document).ready(function(){
oRegion.style.background="url(/bomc3/jx/boms/busBackup/select2.jpg) right -3px no-repeat";
oRegion.style.backgroundColor="#fff" ;
getJsonListFromCode(QueryCode,function(data){
if(data!=null&&data!=""){ // 存在查詢結果 ;
$.each(data,function(i,e){
all_html +="<li style='text-align:left; padding-left:5px;'>"+e.VALUE+"</li>" ;
}) ;
}
},'') ;
}) ;
$(document).click(function (e) {
var target_id = $(e.target).attr('id') ; // 獲取點選dom元素id ;
if(target_id!=oRegion.id)
{
oDivList.style.display = "none"; //隱藏div，實現關閉下拉框的效果 ;
oRegion.style.background="url(/bomc3/jx/boms/busBackup/select2.jpg) right -3px no-repeat";
oRegion.style.backgroundColor="#fff" ;
}
}) ;
//設定下列選擇項的一些事件
function setEvent(colOptions){
for (var i=0; i<colOptions.length; i++)
{
colOptions[i].onclick = function() //為列表項新增單擊事件
{
oRegion.value = this.innerText; //顯示選擇的文字；
oRegion.style.backgroundColor="#219DEF" ;
oDivList.style.display = "none";
};
colOptions[i].onmouseover = function() //為列表項新增滑鼠移動事件
{
this.style.backgroundColor = "#219DEF";
};
colOptions[i].onmouseout = function() //為列表項新增滑鼠移走事件
{
this.style.backgroundColor = "";
};
}
}
//文字獲得焦點時的事件
oRegion.onfocus = function()
{
oRegion.style.background="url(/bomc3/jx/boms/busBackup/select.jpg) right -3px no-repeat";
oRegion.style.backgroundColor="#fff" ;
oDivList.style.display = "block";
if (bNoAdjusted) //控制div是否已經顯示的變數
{
bNoAdjusted = false;
//設定下拉列表的寬度和位置
oDivList.style.width = this.offsetWidth - 4;
oDivList.style.posTop = oRegion.offsetTop + oRegion.offsetHeight + 1; // 設定高度
oDivList.style.posLeft = oRegion.offsetLeft +1 ; // 設定與左邊的位置;
}
};
// 文字內容改變時監聽事件 ;
oRegion.onpropertychange = function(){
contentD.innerHTML ="" ; // 情況div中所有li元素;
html ="" ;
InitializeDIV( oRegion.value) ;
}
function InitializeDIV(value){
var sql ="" ;
if(value!=""){
html+= "<ul><li style='text-align:left; padding-left:3px;'>按"+'"'+"<font style='color :red;'>"+value+"</font>"+'"'+"檢索:</li>";
sql += 'value='+value ;
}else{
html+= "<ul><li style='text-align:left; padding-left:3px;'>請輸入檢索條件:"+"</li>";
sql ="" ;
}
getJsonListFromCodeSync(QueryCode,function(data){
if(data!=null&&data!=""){ // 存在查詢結果 ;
$.each(data,function(i,e){
html+="<li style='text-align:left; padding-left:3px;'>"+e.VALUE+"</li>" ;
}) ;
}else{ // 沒有查詢結果;
html ="" ;
html+= "<ul><li style='text-align:left; padding-left:3px;'>無法匹配:"+'"'+"<font style='color :red;'>"+value+"</font>"+'"'+"</li>";
html += all_html ;
}
html+="</ul>" ;
},sql) ;
contentD.innerHTML = html ;
colOptions = $("#contentDiv li") ; //所有列表元素
setEvent(colOptions) ;
}
</script>
</body>因行業要求，UI效果不需要實現網際網路那麼好的視覺效果，重點是滿足使用者使用需要，哈哈。小弟上傳了，與大家分享，同時也希望大神提出修改意見。
幫助別人，快樂自己------我的格言 也希望大家多多幫助我哈！
共享地址：http://download.csdn.net/detail/cherishme1988/8364579