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

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

}