<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" src="jquery.min.js" src="ajaxlib.js"src="ajaxgold.js"></script>
<script language="javascript" type="text/javascript">
var oInput;
var oPopDiv;
var oNameUl;
function initVars(){
oInput = $("#names");
oPopDiv = $("#popup");
oNameUl = $("#ul_name");
}
function clearNames(){
oNameUl.empty();
oPopDiv.removeClass("show");
}
function setNames(the_names){
clearNames();
oPopDiv.addClass("show");
for(var i=0;i<the_names.length;i++)
oNameUl.append($("<li>"+the_names[i]+"</li>"));
oNameUl.find("li").click(function(){
oInput.val($(this).text());
clearNames();
}).hover(
function(){
$(this).addClass("_hover");},
function(){
$(this).removeClass("_hover");}
);
}
function findNames(){
initVars();
if(oInput.val().length >0){
$.get(
"config.php",{oData: oInput.val()} ,function(data){
var aResult = new Array();
if(data.length>0){
aResult = data.split(",");
setNames(aResult);
}
else
clearNames();
});
}
else
clearNames();
}
</script>
<style type="text/css">
input{
width:150px;
padding:1px;
}
#popup{
position:absolute;
width:152px;
color:#004a7e;
left:120px;
top:33px;
}
.show{
border:1px solid #909090;
}
ul{
list-style-type:none;
color:#004a7e;
}
._hover{
color:#ffffff;
background-color:#004a7e;
}
</style>
</head>
<body>
<form name="form1" method="post">
Choose Name : <input type="text"name="names"id="names"onkeyup="findNames()"/>
</form>
<div id="popup">
<ul id="ul_name"></ul>
</div>
</body>
</html>
