当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JS输入框,模糊查询,显示模糊下拉列表(代码讲解)

JS输入框,模糊查询,显示模糊下拉列表(代码讲解)

2019年03月31日  | 移动技术网IT编程  | 我要评论
//--------------------------js------------------------- $(function(){ //当键盘键被松开时发送ajax获取

//--------------------------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('

not find "' + keywords + '"

');

}else{

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

}

},

error:function(){

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

$('#word').append('

fail "' + keywords + '"

');

}

});

});

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

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

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

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

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

});

});

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

序列号:

//-----------------------------------------------------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;/*鼠标放上变成小手*/

}

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网