html⽂本框⾃动下拉列表,HTMLinput输⼊框实现的动态下拉列
表选择
代码分享:html>
jQuery bootstrap
$(function(){
textSearchList('#searchList','#name','#displayList','selectDisplayItem');
});
function selectDisplayItem(id,name){
alert(id+","+name);
$('#name').val('');
}
搜索:
function textSearchList(searchListID,textNameID,displayListID,actionFun){
$(textNameID).bind('input propertychange', function() {
html下拉菜单的制作方法var str = $.trim($(this).val());
$(displayListID).html('');
var html = appendLis(searchListID,textNameID,displayListID,actionFun,str);
$(displayListID).append(html);
$(searchListID).addClass('open');
});
}
function appendLis(searchListID,textNameID,displayListID,actionFun,inputStr){
/
/ 这⾥进⾏数据请求
var html= appendLi(searchListID,textNameID,displayListID,actionFun,'id','name');
html = html + appendLi(searchListID,textNameID,displayListID,actionFun,'id2','name2');
$(displayListID).append(html);
}
function appendLi(searchListID,textNameID,displayListID,actionFun,id,name){
var click = actionFun + "('"+id+"','"+name+"');closeListDisplay('"+searchListID+"');";
return "
"+name+"";
}
function closeListDisplay(searchListID){
$(searchListID).removeClass('open');
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。