สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย

ตัวอย่าง

• data1
• data2
• data3
• data4
• data5
• data6

CSS Code

<style type="text/css">
/* กำหนด style ให้กับรายการตัวเลือก */
ul.myUL1{
	margin:0px;
	padding:0px;
	font-size:12px;
	width:200px;
	color:#FFFFFF;
	background-color:#666666;
	border:2px solid #000000;
	position:absolute;
	display:none;
/* ถ้ารายการตัวเลือกมีมาก สามารถกำหนดความสูง แล้วให้มีมี scroll เลื่อนดูข้อมูล
โดยเอา comment สองบรรทัดล่างนี้ออก */	
/*	height:80px;
	overflow:auto;*/
}
ul.myUL1 li{
	margin:0px;
	padding:0px;
	cursor:pointer;
	text-indent:5px;
}
ul.myUL1 li:hover{
	margin:0px;
	padding:0px;
	cursor:pointer;
	background-color:#CCCCCC;
	color:#000000;
}
</style>

HTML Code

<!--รายการสำหรับให้เลือก-->
<ul class="myUL1">
<li>data1</li>
<li>data2</li>
<li>data3</li>
<li>data4</li>
<li>data5</li>
<li>data6</li>
</ul>
<form id="form1" name="form1" method="post" action="">
 <input name="data1" type="text" id="data1" />
<br />
<br />
  <input type="submit" name="Submit" value="Submit" />
</form>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	var obj1="input#data1"; // กำหนด object  เป้าหมาย
	var obj2="ul.myUL1"; // กำหนด object รายการตัวเลือก
	$(obj1).focus(function(){
		var nX=$(this).offset().left;
		var nY=$(this).offset().top+($(this).height()+6);
		$(obj2).show().css({
			"left":nX,
			"top":nY
		});
	});
	$(obj2).children("li").click(function(){
		$(obj1).val($(this).text());
		$(obj2).hide();
	});
	$(obj2).hover(function(){
		$(this).show();	
	},function(){
		$(this).hide();
		$(obj1).blur();
	});
});
</script>