根据网络其他大神的代码进行了一些更改，现在可以把输入框放置任何位置。

效果图：

html：

<span class="second">
        <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)"
            oninput="setinput(this);" placeholder="请选择或输入" />
        <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">12323</option>
            <option value="">31</option>
            <option value="">1332</option>
            <option value="">412</option>
            <option value="">42</option>
            <option value="">11</option>
        </select>
    </span>

js：

var TempArr = []; //存储option  
    $(function () {
        /*先将数据存入数组*/
        $("#typenum option").each(function (index, el) {
            TempArr[index] = $(this).text();
        });
        $(document).bind('click', function (e) {
            var e = e || window.event; //浏览器兼容性     
            var elem = e.target || e.srcElement;
            while (elem) { //循环判断至跟节点，防止点击的是div子元素     
                if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
                    return;
                }
                elem = elem.parentNode;
            }
            $('#typenum').css('display', 'none'); //点击的不是div或其子元素     
        });
    })

    function changeF(this_) {
        $(this_).prev("input").val($(this_).find("option:selected").text());
        $("#typenum").css({
            "display": "none"
        });
    }

    function setfocus(this_) {
        $("#typenum").css({
            "display": ""
        });
        var select = $("#typenum");
        for (i = 0; i < TempArr.length; i++) {
            var option = $("<option></option>").text(TempArr[i]);
            select.append(option);
        }
    }

    function setinput(this_) {
        var select = $("#typenum");
        select.html("");
        for (i = 0; i < TempArr.length; i++) {
            //若找到以txt的内容开头的，添option  
            if (TempArr[i].substring(0, this_.value.length).indexOf(this_.value) == 0) {
                var option = $("<option></option>").text(TempArr[i]);
                select.append(option);
            }
        }
    }

css：

.second {
    position: relative;
}

.second input {
    width: 167px;
    /* top: 9px; */
    outline: none;
    border: 0pt;
    /* position: absolute; */
    line-height: 30px;
    /* left: 8px; */
    height: 30px;
    border: 1px solid #999;
}

.second select {
    position: absolute;
    left: 0;
    width: 167px;
    height: 106px;
    margin: 0px;
    outline: none;
    border: 1px solid #999;
    margin-top: 31px;
}

.second select option:hover {
    background: #1388ff;
    color: white;
}

原文链接：https://blog.csdn.net/sun2015_07_24/article/details/53023167