html:
<body οnkeyup="keyup();" οnclick="unshow();">
<div style="width: 300px;z-index:2000">
<input type="text" id="txt" value="" onpropertychange="getCustomer(this.value);" style="width: 300px;" >
<font color="#FF0000">*</font>
<div id="show" style="border: 1px solid #000000;display:none;"></div>
</div>
JavaScript:
<style>
*{
font-size: 12px;
}
ul{
list-style: none;
margin: 0px auto 0px 5px;
}
li{
cursor: pointer;
display: block;
margin-top: 0px;
padding-top: 5px;
padding-left: 2px;
}
.select{
background-color: #cccccc;
}
.unselect{
background-color: #ffffff;
}
</style>
<script type="text/javascript">
function getCustomer(value)
{
if(value==null || value=="")
{
return false;
}
var url='<%=request.getContextPath()%>/autoCustomer.do?userName='+encodeURI(encodeURI(value));
ajaxSubmitZYR(url)
}
function createXmlHttpRequest(){
// 判断游览器
if (window.XmlHttpRequest ) {
xmlhttp = new XmlHttpRequest() ; // FireFox 等浏览器的创建方式
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 等浏览器的创建方式
}
}
//Ajax主调函数
function ajaxSubmitZYR(url){
if(event.keyCode!=13&&event.keyCode!=40&&event.keyCode!=38){
createXmlHttpRequest();
xmlhttp.open("post",url,false);
//xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.setrequestheader("Content-Type","text/html; encoding=UTF-8");
xmlhttp.onreadystatechange=callback;
xmlhttp.send(null);
}
}
//Ajax回调函数
function callback(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
parsexmlDOM(xmlhttp.responseXML);
}else{
alert("系统异常!");
alert("xxxxxxxxxxx");
}
}
}
//XMLDOM解析函数
function parsexmlDOM(xmlDOM){
var titles = xmlDOM.getElementsByTagName("title");
var div = document.getElementById("show");
div.innerHTML = "";
count=0;
flag=0;
if(titles.length>0){
div.style.display="block";
var html = "<ul>";
for(var i=0;i<titles.length;i++){
count ++;
var nodeValue=titles[i].attributes.getNamedItem("id").value;
//alert(titles[i].attributes.getNamedItem("id").value);
html = html+"<li value='"+nodeValue+"' id=/"li"+i+"/" myflag=/"0/" οnmοuseοver=/"select(this);show();/" οnmοuseοut=/"unselect(this);unshow();/" οnclick=/"selected(this);/">"+titles[i].firstChild.nodeValue+"</li>";
}
html = html+"</ul>";
div.innerHTML = html;
}else{
div.style.display="none";
}
}
//鼠标移出li后改变样式
function unselect(obj){
obj.className="unselect";
}
//鼠标移入li后改变样式
function select(obj){
obj.className="select";
}
//隐藏提示div
function unshow(){
document.getElementById("show").style.display="none";
}
//显示提示div
function show(){
document.getElementById("show").style.display="block";
}
//鼠标点击选中值
function selected(obj){
document.getElementById("txt").value=obj.innerText;
document.getElementById("KHNO").value=obj.value;
document.getElementById("show").style.display="none";
}
//监视键盘操作
function keyup(){
//选择上一个
if(event.keyCode==38){
previous();
}
//选择下一个
if(event.keyCode==40){
next();
}
//选中
if(event.keyCode==13){
enter();
}
}
//当按键盘下时,选择下一个
function next(){
if(count>0&&document.getElementById("show").style.display=="block"){
if(flag==0){
var temp = document.getElementById("li0");
temp.className="select";
temp.myflag="1";
flag=1;
}else{
for(var i=0;i<count;i++){
var temp = document.getElementById("li"+i);
if(temp.myflag=="1"){
temp.className="unselect";
temp.myflag="0";
id = temp.id.substr(2)-0+1;
if(id==count){
id=0;
}
var temp2 = document.getElementById("li"+id);
temp2.className="select";
temp2.myflag="1";
break;
}
}
}
}
}
//当按键盘"上"时,选择上一个
function previous(){
if(count>0&&document.getElementById("show").style.display=="block"){
if(flag==0){
var temp = document.getElementById("li0");
temp.className="select";
temp.myflag="1";
flag=1;
}else{
for(var i=0;i<count;i++){
var temp = document.getElementById("li"+i);
if(temp.myflag=="1"){
temp.className="unselect";
temp.myflag="0";
id = temp.id.substr(2)-1;
if(id<0){
id=count-1;
}
var temp2 = document.getElementById("li"+id);
temp2.className="select";
temp2.myflag="1";
break;
}
}
}
}
}
//当按键盘"回车"时,把选中的值放入输入框
function enter(){
if(count>0&&document.getElementById("show").style.display=="block"){
if(flag==1){
for(var i=0;i<count;i++){
var temp = document.getElementById("li"+i);
if(temp.myflag=="1"){
document.getElementById("txt").value=temp.innerText;
document.getElementById("KHNO").value=temp.value;
document.getElementById("show").style.display="none";
break;
}
}
}
}
}
</script>
java:
private ActionForward autoCustomer(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {
StringBuffer xmlDOM = new StringBuffer();
xmlDOM.append("<titles>");
XxzzManageBZ bz = new XxzzManageBZ();
try {
String userName = java.net.URLDecoder.decode(request.getParameter("userName"), "UTF-8");// //解码关键!!!!
HttpSession session = request.getSession();
String sbr = request.getParameter("sbr");// 计划提交人,根据计划提交人获得此人所在子公司。
bz.autoCustomer(userName, xmlDOM);// xmlDOM.append("<title id='"+rs.getString(6)+"'>"+titleName+"</title>");
xmlDOM.append("</titles>");
response.setContentType("text/xml; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(xmlDOM.toString());
out.close();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return mapping.findForward("success");
}