输入查询智能提示

最新推荐文章于 2022-10-06 19:54:33 发布

weixin_38727482

最新推荐文章于 2022-10-06 19:54:33 发布

阅读量255

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_38727482/article/details/102563790

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

再jsp中添加div
jsp页面：

								<label class="label-item single-overflow pull-left"
									  >主管海关:</label>
								<div class=" input-group"  style=" width: 100%;">
									<input type="text" id="customnameId"  class="form-control form-size">
									<div id="auto_div"  style="height:150px; overflow:scroll" >
							        </div>
								</div>

js页面：
$(function(){
initDataGrid(); //可忽略页面加载方法
old_value = $("#customnameId").val();
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲customnameId").\dots$ ("#customnameId").val() == “”) {
AutoComplete(“auto_div”, “customnameId”, name_list);
}
});
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots>=0;i--){ //$ (’#search-result’).append(data[i].customsname+’
’);
name_list.push(data[i].customscode+" "+data[i].customsname);
}

})

$("#customnameId").keyup(function () {
	var q = $("#customnameId").val();
	
	if(isChinese(q)){
	    
		AutoComplete("auto_div", "customnameId", name_list);
	}else {

		AutoComplete("auto_div", "customnameId", name_list);
	}
	
	
    
});

});
//测试用的数据
var code_list = [];
var name_list = [];
//var test_list = [“小张”, “小苏”, “小杨”, “老张”, “老苏”, “老杨”, “老爷爷”, “小妹妹”, “老奶奶”, “大鹏”, “大明”, “大鹏展翅”, “你好”, “hello”, “hi”];
var old_value = “”;
var highlightindex = -1; //高亮

//自动完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != old_value || old_value == “”) {
var autoNode = $("#" + auto); //缓存对象（弹出框）
var carlist = new Array();
var n = 0;
old_value = $("#" + search).val();

    for (i in mylist) {
        if (mylist[i].indexOf(old_value) >= 0) {
            carlist[n++] = mylist[i];
        }
    }
    if (carlist.length == 0) {
        autoNode.hide();
        return;
    }
    autoNode.empty();  //清空上次的记录
    for (i in carlist) {
        var wordNode = carlist[i];   //弹出框里的每一条内容

        var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
        newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

        newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框

        //鼠标移入高亮，移开不高亮
        newDivNode.mouseover(function () {
            if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）
                autoNode.children("div").eq(highlightindex).css("background-color", "white");
            }
            //记录新的高亮节点索引
            highlightindex = $(this).attr("id");
            $(this).css("background-color", "#ebebeb");
        });
        newDivNode.mouseout(function () {
            $(this).css("background-color", "white");
        });

        //鼠标点击文字上屏
        newDivNode.click(function () {
            //取出高亮节点的文本内容
            var comText = autoNode.hide().children("div").eq(highlightindex).text();
            highlightindex = -1;
            //文本框中的内容变成高亮节点的内容
            $("#" + search).val(comText);
        })
        if (carlist.length > 0) {    //如果返回值有内容就显示出来
            autoNode.show();
        } else {               //服务器端无内容返回 那么隐藏弹出框
            autoNode.hide();
            //弹出框隐藏的同时，高亮节点索引值也变成-1
            highlightindex = -1;
        }
    }
}

//点击页面隐藏自动补全提示框
document.onclick = function (e) {
    var e = e ? e : window.event;
    var tar = e.srcElement || e.target;
    if (tar.id != search) {
        if ($("#" + auto).is(":visible")) {
            $("#" + auto).css("display", "none")
        }
    }
}

}

后台：就一个查询方法把数据查出来即可