html文本框自动下拉列表 HTML input输入框实现的动态下拉列表选择

代码分享：html>

jQuerybootstrap

$(function(){

textSearchList('#searchList','#name','#displayList','selectDisplayItem');

});

functionselectDisplayItem(id,name){

alert(id+","+name);

$('#name').val('');

}

搜索：

functiontextSearchList(searchListID,textNameID,displayListID,actionFun){

$(textNameID).bind('inputpropertychange',function(){

varstr=$.trim($(this).val());

$(displayListID).html('');

varhtml=appendLis(searchListID,textNameID,displayListID,actionFun,str);

$(displayListID).append(html);

$(searchListID).addClass('open');

});

}

functionappendLis(searchListID,textNameID,displayListID,actionFun,inputStr){

//这里进行数据请求

varhtml=appendLi(searchListID,textNameID,displayListID,actionFun,'id','name');

html=html+appendLi(searchListID,textNameID,displayListID,actionFun,'id2','name2');

$(displayListID).append(html);

}

functionappendLi(searchListID,textNameID,displayListID,actionFun,id,name){

varclick=actionFun+"('"+id+"','"+name+"');closeListDisplay('"+searchListID+"');";

return"

"+name+"";

}

functioncloseListDisplay(searchListID){

$(searchListID).removeClass('open');

}