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

}

You May Also Like