<div>
<input id="condition" name="object.name" type="text" οnkeyup="doQuery()"/> 这个键盘事件很重要实现动态交互
<div id="div" style="position: absolute;z-index: 100">
<table id="table">
</table>
</div>
<div>
以上是基本的JSP页面
-----------------------------------------------------------------------------------------------------------------------------------------------------
对应的JS代码
$(function(){
$("condition").val("");//刷新的时候清除表单值
//----------------------提示信息--------------------------------
$("#condition").bind("mouseover", function () {
doQuery();
$("#div").show();
}).bind("mouseout", function () {
$("#div").hide();
}).bind("onkeyup",function(){
getLinkData();
});
$("#div").bind("mouseover", function () {
$("#div").show();
}).bind("mouseout", function () {
$("#div").hide();
})
});
function getLinkData() {
var div = $("#div"); //获得对应的div对象
var table= $("#table"); //获得对应的tbody对象
var condition= $("#table"); //获得对应的输入框对象
clear();//清除联想输入提示框的内容
//利用ajax获取后台的模糊查询的数据,并且封装成下拉列表的形式展现出来
$.ajax( {
type : "POST",
dataType : "json",
url : $.WEB_ROOT + '',
data : jQuery.param( {
"condition":$.trim($("#condition").val())},
error:function(){
alert("没有对应的数据,请查看输入的查询条件!");
},
success : function(data) {//当Ajax提交成功时调用的方法
if(data.length==0){
return;
}
setOffsets();//设置联想输入下拉列表提示框的位置
var tr,td,text;
for (var i = 0; i < data.length; i++) {//根据返回的值,手动的拼tbody的内容
text = document.createTextNode(data[i].name);//从Action中返回的数据中取出name的值
td = document.createElement("td");//创建一个td的对象
tr = document.createElement("tr");//创建一个tr的对象 className="mouseOver;
$(td).mouseover(function(){
$(this).attr("class","mouseOver");
});
$(td).mouseout(function(){
$(this).attr("class","");
});
td.onclick = function(){populateModel(this)};//单击td是的方法为populateModel
td.appendChild(text);
tr.appendChild(td);
div.appendChild(tr);
}
}
});
//点击下拉列表中的某个选项时调用的方法
function populateModel(cell) {
clear();
condition.value = cell.firstChild.nodeValue;
//initOtherData(condition.value);利用输入框中的数据调用其他方法,初始化其他数据
clear();//清除自动完成行
}
//清除自动完成行,只要tbody有子节点就删除掉,并且将将外围的div的边框属性设置为不可见的
function clear() {
while (div.childNodes.length > 0) {
div.removeChild(div.firstChild);
}
div.attr("display", "none");
}
//设置下拉列表的位置和样式
function setOffsets() {
var width = condition.offsetWidth;//获取linkDataProperty输入框的相对宽度
var left = getLeft(condition);
var top = getTop(condition) + condition.offsetHeight;
div.style.border = "black 1px solid";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.width = width + "px";
}
//获取指定元素在页面中的宽度起始位置
function getLeft(e) {
var offset = e.offsetLeft;
if (e.offsetParent != null) {
offset += getLeft(e.offsetParent);
}
return offset;
}
//获取指定元素在页面中的高度起始位置
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) {
offset += getTop(e.offsetParent);
}
return offset;
}
}
//清空输入框中的数据
function clear() {
var condition=document.getElementById("condition");
condition.value="";
}
------------------------------------------------------------------------------------------------------------------------------------------------
下拉框滑动选择颜色变化对应的css
.mouseOver{
background: red;
}
转载于:https://www.cnblogs.com/songwy/p/4461026.html