类似百度搜索的下拉提示框，复制别人的，改了一下。

Posted 2020-10-06

 

jsp代码：在填写上级公司的input框时需要给客户提示已经保存过的相似公司名称，所以在下面加一个id为append的空的div。

<div class="row cl">
　　<label class="form-label col-xs-4 col-sm-2" style="text-align: right;">上级公司：</label>
　　<div class="formControls col-xs-8 col-sm-9">
　　<input type="text" class="input-text" placeholder="注：无上級公司则无需填写" value="${company.temporary}" id="kw" onKeyup="loadCompanyNamejson(this);" style="width:310px">
　　</div>
　　<div

　　 id="append" class="formControls col-xs-8 col-sm-9" style="border:solid #F5F5F5 2px; border-top:1px; text-align: left; display:none; width:310px; margin-left: 198px; overflow-y: auto;height: 100px;"><               < /div>
</div>

css样式：乱加的，能看就行

 

#append{
border-width: 1px 2px 2px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: rgb(245, 245, 245);
border-bottom-color: rgb(245, 245, 245);
border-left-color: rgb(245, 245, 245);
border-image: initial;
border-top-style: initial;
border-top-color: initial;
width: 310px;
margin-left: 198px;
display: none;
height: 100px;
overflow-y: auto;
}

 

======border:solid #F5F5F5 2px; border-top:1px; text-align: left;  display:none; width:310px; margin-left: 198px; overflow-y: auto;height: 130px;"=======

 

js代码：异步获取搜索提示信息的list，也可以自己写一个提示的字符串数组

 

function loadCompanyNamejson(obj){
　　if (nameList == null || nameList == undefined) {
　　　　$.ajax({
　　　　type : "POST",
　　　　url : rootpath + "/crm/company/nameJson",
　　　　dataType:"json",
　　　　contentType: "application/json;charset=utf-8",
　　　　data:JSON.stringify(company),
　　　　success : function(data) {

                这里是先声明了一个全局的var变量nameList用于储存临时拿来的list
　　　　nameList = data.nameList;
　　　　getContent(obj, nameList);
　　　　},
　　error : function(data) {
　　　　console.log(data);
　　}
});
　　}else {
　　getContent(obj, nameList);
　　}
}

 

拿到数据后判断一下，调用getContent（）方法。这里的kw是input框的id，上面已经红色标明

function getContent(obj, nameList){
　　var kw = jQuery.trim($(obj).val());
　　if(kw == ""){
　　$("#append").hide().html("");
　　return false;
}

这里需要改一下循环的list后面的直接复制就可以了
var html = "";
for (var i = 0; i < nameList.length; i++) {
　　var nameTemp = nameList[i].name;
　　if (nameTemp.indexOf(kw) >= 0) {
　　html = html + "<div class=‘item companyNameclass‘ onmouseenter=‘getFocus(this)‘ onClick=‘getCon(this);‘>" + nameTemp + "</div>";
　　}
}
　　if(html != ""){
　　　　$("#append").show().html(html);
　　}else{
　　　　$("#append").hide().html("");
　　}
}

======================================================================================

 

$(function(){
　　$(document).keydown(function(e){
　　e = e || window.event;
　　var keycode = e.which ? e.which : e.keyCode;
　　if(keycode == 38){
　　　　if(jQuery.trim($("#append").html())==""){
　　　　　　return;
　　　　}
　　　　movePrev();
　　　　}else if(keycode == 40){
　　　　　　if(jQuery.trim($("#append").html())==""){
　　　　　　　　return;
　　　　　　}
　　　　$("#kw").blur();
　　　　if($(".item").hasClass("addbg")){
　　　　　　moveNext();
　　　　}else{
　　　　　　$(".item").removeClass(‘addbg‘).eq(0).addClass(‘addbg‘);
　　　　}
　　}else if(keycode == 13){
　　　　dojob();
　　}
});

 

　　var movePrev = function(){
　　$("#kw").blur();
　　var index = $(".addbg").prevAll().length;
　　if(index == 0){
　　　　$(".item").removeClass(‘addbg‘).eq($(".item").length-1).addClass(‘addbg‘);
　　}else{
　　　　$(".item").removeClass(‘addbg‘).eq(index-1).addClass(‘addbg‘);
　　}
};

　　var moveNext = function(){
　　var index = $(".addbg").prevAll().length;
　　if(index == $(".item").length-1){
　　　　$(".item").removeClass(‘addbg‘).eq(0).addClass(‘addbg‘);
　　}else{
　　　　$(".item").removeClass(‘addbg‘).eq(index+1).addClass(‘addbg‘);
　　}
};

　　var dojob = function(){
　　$("#kw").blur();
　　var value = $(".addbg").text();
　　$("#kw").val(value);
　　$("#append").hide().html("");
　　};
});

=============================================================

function getFocus(obj){
　　$(".item").removeClass("addbg");
　　$(obj).addClass("addbg");
}
function getCon(obj){
　　var value = $(obj).text();
　　$("#kw").val(value);
　　$("#append").hide().html("");
}