SV~

跟jQuery的Auto Complete不同的地方是，

點一下輸入框(input type=text)就會跑出"下拉式選單"，點選後就會幫你輸入好內容了(不是輸入內容幫你找到字串配對)。

其實原理跟網頁的menu bar差不多，

用js做了滑鼠處理。

首先在css樣式上讓<ul><li>能像下拉式選單(<select>)一樣的造型(你也可以自己修改，我的比較陽春)
 

<style type="text/css"> 
	.customselect{
		z-index: 100px;
		list-style: none;
		margin: 0px;
		padding: 0px;
		border: 1px solid #aaaaaa;
	}
	.customselect li{
		border: 1px solid #aaaaaa;
		cursor: default;
	}
</style>

如果希望使用者在選單上的滑鼠符號是手(超連結的感覺)，就把cursor改成cursor: pointer;

 

再來，畫面的樣子大概是用輸入框與<ul><li>排成：

 

<input type="text" id="txNTP" value="time.stdtime.gov.tw" />
<ul id="ctmselect" class="customselect" style="display:none;width:200px;">
	<li id="li0">tick.stdtime.gov.tw</li>
	<li id="li1">tock.stdtime.gov.tw</li>
	<li id="li2">time.stdtime.gov.tw</li>
	<li id="li3">clock.stdtime.gov.tw</li>
	<li id="li4">watch.stdtime.gov.tw</li>
</ul>

因為js部分用getElementById，所以很多id很醜(有能力的可以用getElementByClass或者抓ul裡面的每個li)

 

js的邏輯：

input text的部分：點到就跳出選單，當失焦(點其他地方)時則判斷是否還在選單上面，否則將選單隱藏。

選單部分：沿用選單的特性：移動到哪個選項上，改變背景顏色，當按下後再改變背景顏色讓使用者有按下的感覺。

為了記錄之前按到的選項是哪個，有兩個變數：nowselect以及chselect。

因此js的部分：

 

var isSelect=false;
var nowselect=2;
var chselect=2;
var txNTP=document.getElementById("txNTP");
var ctmselect=document.getElementById("ctmselect");
txNTP.onclick=function(){
	ctmselect.style.display="block";
	for(var j=0;j<5;j++){
		var li=document.getElementById("li"+j);
		if(txNTP.value==li.innerHTML){
			// same as the default content of txNTP
			li.style.background="#0000ff";
		}
	}
}
for(var i=0;i<5;i++){
	var li=document.getElementById("li"+i);
	li.onmousedown=function(){
		nowselect=parseInt(this.id.substr(2));
		if(chselect!=nowselect)
			document.getElementById("li"+chselect).style.background="#ffffff";
		this.style.background="#0000ff";
	}
	li.onmouseup=function(){
		txNTP.value=this.innerHTML;
		chselect=parseInt(this.id.substr(2));
		ctmselect.style.display="none";
	}
	li.onmouseover=function(){
		isSelect=true;
		if(parseInt(this.id.substr(2))!=nowselect)
			this.style.background="#3399ff";
	}
	li.onmouseout=function(){
		isSelect=false;
		if(parseInt(this.id.substr(2))!=nowselect)
			this.style.background="#ffffff";
	}
}
txNTP.onblur=function(){
	if(isSelect==false)
		ctmselect.style.display="none";
}

在排版的時候可以注意一下z-index(因為你的下拉式選單很長，若你輸入框下面有其他東西，就要調整ul的z-index)

，js的部分可以寫得更簡單，SV寫的比較醜XDD

缺點就是如果選項很多，還是改成比較簡單的寫法喔！

 

那麼它的效果就會像這樣：

 

https://e5eeec4268beb807e3bbb381df3cb3d655b3c416.googledrive.com/host/0B7hg_8WvMyfJaTAtaW43SHVpRlE/index.html

 

這樣，你就可以讓使用者單純輸入或者用下拉式選單的方式點選內容囉~

有興趣的還可以將選單用不同的方式(做動畫)跑出來，SV用最簡單的style.display。
 

不喜歡直接在輸入框點選的方式，也可以改成在輸入框右邊使用按鈕來開合選單。

 

主要是給不使用jQuery套件的方法喔~