input和div模仿select，带输入提示

有时候我们需要select和input的结合体，即可以使用下拉框，同时也可以用来输入，输入的同时显示可选的下拉选项

先上html代码

<div class="input-group input-group-sm has-warning">
    <span class="input-group-addon">label内容</span>
    <input class='form-control' onclick="showList(this)" onkeyup="showList(this)">
</div>

对于这么个input，我们需要在点击的时候，和输入内容的时候，展示一个div，该div应该悬浮在该input下边，同时里面加上一些要选择的内容

/**
* 点击input产生下拉选项的函数
* list的内容为数组类型数据,每个元素为json,包括一个id和一个value
*/
function showList(me) {
　　$('.select-drop-div').remove(); //删除已有的下拉框

　　var list = window.list;
　　var me = $(me); //当前的input
　　var val = $(me).val(); //当前的input的val
　　//下拉框内部的选项
　　var listIn = '';
　　for (var i = 0; i < list.length; i++) {
　　　　if (val == '') { //输入框没有内容,显示所有选项
　　　　　　listIn = listIn + "<div class='select-drop-in' id=" + list[i].id + " onclick='selectDropClick(this)'>" + list[i].value + "</div>";
　　　　} else { //输入框有内容
　　　　　　if (list[i].value.indexOf(val) > -1) { //输入框的内容是值的一部分
　　　　　　listIn = listIn + "<div onclick='setValueToMySelect(this)' class='select-drop-in' id=" + list[i].id + " onclick='selectDropClick(this)'>" + list[i].value + "</div>";
　　　　}
　　}
　　//下拉框的div
　　var listDiv = $('<div>').css('padding', '3px').css('z-index', '200').css('height', 'auto').css('width', width).css('max-height', '200px').css('overflow', 'auto').css('position', 'absolute').css('top', '35px')
　　if (listIn == '') {//当输入内容没有匹配的选项时,listIn的div提示
　　　　listIn = '<div>未查找到符合的内容<br>该输入内容将被创建!</div>'
　　}
　　listDiv.addClass('select-drop-div form-control').html(listIn);
　　me.parent().append(listDiv);
}

对于展开的下拉选项,需要进行选择,点选的时候,应该将内容放到input中,同时对其id进行设置

/**
* 点击下拉选项的函数
*/
function selectDropClick(me) {
　　var me = $(me);//当前点击对象
　　var id = me.attr('id');//当前点击对象的id
　　var val = me.html();//当前点击的值
　　me.parent().parent().find('.form-control').val(val).attr('id', id);//赋值并写入id
　　$('.select-drop-div').remove(); //删除已有的下拉框
}

对于手动对input的值进行修改,其id是否正确等校验因素,不在此写了,具体问题具体分析了就

上个效果图,实际做的时候远比上述的复杂的多(校验,id不匹配的重置,表单收集,活动条目创建等)

 以上!