类似百度搜索框关联查询
于关联查询,找了很多方法,可都不尽人意,最后参考了好心网友提供的代码加上自己的实际需求,于此记录。
首先,html
<input type="search" value="" name="curOrganName" placeholder="请填写" id="cl_obj" autocomplete="off" class="inputs paddingleft">
<input type="hidden" name="yd_mc" class="cl_pub" id="cl_obj1">
<input type="hidden" name="currentdeptcode" id="currentdeptcode" value="">
<div id="auto_obj"></div>
js
var autoNode1=$("#auto_obj") ;
//一开始加载方法
var highlightindex = -1;///高亮显示的变量值(0-n) 初始-1即无任何 子div被选中
var timeout;///服务器交互延迟
var wordInput1 = $("#cl_obj");//搜索的input输入框
var card_id = "";
wordInput1.keyup(function (event)//键盘按下
{
nameInput(wordInput1, autoNode1);
});
function nameInput(word_obj, obj_node) {
var textInput1 = word_obj.val(); //输入框输入的值
var myEvent = event || window.event; //不同浏览器选不同事件
var keyCode = myEvent.keyCode;///键盘按下的值
var outDivHeight = obj_node.height()-20;//获取父级div的高度,用于控制滚动条滚动
if (word_obj.val() != "") //输入不为空
{
if (keyCode == 38 || keyCode == 40) { //键盘向上或向下移动
var autoNode1s = obj_node.children();///获取autoNode1s div下的所有子节点
if (keyCode == 38)//向上
{
if (highlightindex != -1)//不为-1 原来有节点被选中
{
if(highlightindex==0){
}else{
word_obj.val($(this).attr("description"));//赋值给输入框
autoNode1s.eq(highlightindex).css("background-color", "white");//改变原来背景色 白色
highlightindex--; //减一 向上移到
var innerHeight = autoNode1s.eq(highlightindex).position().top||0;
if(innerHeight < 35){//当前显示的单位距离父级div的高度若小于子div的高度(35是我这里的一个子div高度),则滚动条向上滚动
var scrollheight = obj_node.scrollTop();
obj_node.scrollTop(scrollheight-200);
}
}
}
if (highlightindex == -1) { //为-1 即原来值为0到顶端了
highlightindex = autoNode1s.length - 1;//直接把变量改为最后一个 (注意长度length是1-n,而highlightindex 0-n)
}
autoNode1s.eq(highlightindex).css("background-color", "#ACD6FF");//改变新选中的div背景色 蓝色
word_obj.val(autoNode1s.eq(highlightindex).attr("description")); //直接赋值给输入框
$("#currentdeptcode").val(autoNode1s.eq(highlightindex).attr("dept_code"));
} else if (keyCode == 40)//向下
{
if (highlightindex != -1)//不为-1 原来有节点被选中
{
if(autoNode1s.length == (highlightindex+1)){
}else{
autoNode1s.eq(highlightindex).css("background-color", "white");//改变原来选中div背景色
highlightindex++; //加1 即向下移动
var innerHeight = autoNode1s.eq(highlightindex).position().top||0;
if(innerHeight >= outDivHeight){//当前显示的单位距离父级div的高度若大于等于父级div的高度,则滚动条滚动
var scrollheight = obj_node.scrollTop();
obj_node.scrollTop(scrollheight+200);
}
}
}
if (highlightindex == -1)//为-1及可加
{
highlightindex++;
}
autoNode1s.eq(highlightindex).css("background-color", "#ACD6FF"); //改变背景色
word_obj.val(autoNode1s.eq(highlightindex).attr("description")); ////直接赋值给输入框
$("#currentdeptcode").val(autoNode1s.eq(highlightindex).attr("dept_code"));
}
} else if (keyCode == 13)//回车
{
//此处可对回车输入的值作验证
obj_node.hide();//隐藏div
highlightindex = -1;//高亮变量恢复默认值
} else {
clearTimeout(timeout);//清空前一次的倒数时间
if (keyCode != 13) { //没有按回车键
timeout = setTimeout(function () { ///延迟与服务器交互时间提高效率
getDateName(textInput1, obj_node, word_obj);
}, 500);///延时方法结束
}
}
} else { ///输入为空隐藏div节点autoNode1 不与服务器交互
obj_node.hide();
highlightindex = -1;
}
}
function getDateName(txtInput, obj_node, word_obj) {
$.post( "get_organdata", {"input": txtInput}, function (data) {//与服务器交互 采用xml返回格式
var searchs = JSON.parse(data);//获取返回值节点
obj_node.html("");//清空内容防止div里面重复
//判断是否查询到数据
if(searchs.length==0){
$("#currentdeptcode").val('');
}
if (searchs.length > 0) {
for (var i = 0; i < searchs.length; i++) {
var NewNode = $("<div>").attr("id", searchs[i].description);//新建一个div节点 并给以id属性且等于i值
var NewNode = $("<div>").attr("dept_code", searchs[i].seq_no);
NewNode.attr("description", searchs[i].description);
NewNode.html(searchs[i].description).appendTo(obj_node);//把word节点的内容赋给div节点 并把div追加到(相当于内容插入) autoNode1节点的div
NewNode.hover(//鼠标事件
function () {///鼠标移到
if (highlightindex != -1) { ///鼠标键盘一起用时防止同时高亮
obj_node.children().eq(highlightindex).css("background-color", "white");
}
word_obj.val($(this).attr("description"));//赋值给输入框
$("#currentdeptcode").val($(this).attr("dept_code"));
highlightindex = $(this).attr("id"); //把id值赋给highlightindex
$(this).css("background-color", "#ACD6FF");
},
function () {///鼠标移走
$(this).css("background-color", "white");
}
);
NewNode.click(function () {///点击鼠标时
word_obj.val($(this).attr("description"));//赋值给输入框
$("#currentdeptcode").val($(this).attr("dept_code"));
var curDeptcode=$(this).attr("dept_code");
var orDeptcode='';
$.post("getCurrentDeptCode",function (rs) {
orDeptcode=rs;
if(curDeptcode==orDeptcode){
layer.msg('原档案室名称与转入档案室名称重复,<br>请重新输入!', {
time: 2500, //2s后自动关闭
});
$("#cl_obj").val("").focus();
}
},"text");
obj_node.hide();
highlightindex = -1;
});
}
}
if (searchs.length ) ///有返回值才显示
{
obj_node.show();
}
else {///返回为空隐藏
obj_node.hide();
}
});///.post里的方法结束
}
ps:原先没有对键盘的上下移动而控制div的滚动条随之移动,后面增加了,效果图如下。