2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > JS之输入框 模糊查询。显示模糊下拉列表

JS之输入框 模糊查询。显示模糊下拉列表

时间:2022-03-27 15:50:02

相关推荐

JS之输入框 模糊查询。显示模糊下拉列表

//--------------------------JS-------------------------

$(function(){

//当键盘键被松开时发送Ajax获取数据

$('#handleApplyLabelSequence').keyup(function(){

var keywords = $(this).val();

if (keywords=='') { $('#word').hide(); return; };

$.ajax({

type : "POST",

url: '${path}/rest/application/ync/getAddYncLabelList',

dataType: 'json',

data:{bandNumber:$("#handleApplyLabelBandNumber").val(),keywords:keywords},

success:function(data){

debugger;

$('#word').empty().show();

if (data.message==''){

$('#word').append('<div class="error">Not find "' + keywords + '"</div>');

}else{

$('#word').append(data.message);

}

},

error:function(){

$('#word').empty().show();

$('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');

}

});

});

//点击数据复制给输入框

$(document).on('click','.click_work',function(){

var word = $(this).text();

$('#handleApplyLabelSequence').val(word);

$('#word').hide();

});

});

//----------------------------------------html--------------------------------------------------

<label for="text" class=" control-label ">

<span class="lbl">序列号:</span>

<input type="text" id="handleApplyLabelSequence" placeholder="请输入标贴序列号S/N" style="width: 230px">

<div id="word"></div>

</label>

//-----------------------------------------------------css----------------------------------------------

#word{

position: absolute;

z-index: 99;

width: 145px;

height: auto;

background-color: white;

border: black solid 1px;

display: none;

}

.click_work{

padding-bottom: 8px;

font-weight:lighter;

font-size: 13px;

cursor:pointer;/*鼠标放上变成小手*/

}

.click_work:hover{

color: orange;

background-color: gray;

}

.error{

color: gray;

cursor:pointer;/*鼠标放上变成小手*/

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。