输入框输入下拉列表弹出数据填充

173 阅读1分钟

页面代码:

 <td class="td-content"><input style="height: 30px;width: 200px;" maxlength="20" type="text"
                                                          id="interfaceCode2" name="interfaceCode2"
                                                          value="${interfaceCode2}" placeholder="请输入接口编码" required/>
                                <div class="searchResDiv" id="searchResDiv" name="searchResDiv"
                                     style="border:1px solid #5bc0de;height: 60px;width:300px;overflow: auto;display: none"></div>
                            </td>

JS:

function searchInterface(keyWord) {
    $("#searchResDiv").empty();
    $.ajax({
        url: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
        type: "GET",
        async: true,
        data: {
            keyWord: keyWord
        },
        dataType: "json",
        success: function (data) {

            if (data.resCode == "100") {
                for (var i = 0; i < data.resData.length; i++) {
                    var dom = '<div class="my-search-item" style="display: block" interfaceDescribe="' + data.resData[i].name + '">' + data.resData[i].code + '</div>'
                    $('.searchResDiv').append(dom)
                }
                $('.searchResDiv').show()
                $(".my-search-item").hover(function () {
                    $(this).css("background-color", "#e5d8d8");
                }, function () {
                    $(this).css("background-color", "unset");
                });
                $('.my-search-item').bind('click', function () {
                    $('.searchResDiv').hide()
                    $('#interfaceCode2').val($(this).text())
                    $('#interfaceDescribe').val($(this).attr('interfaceDescribe'))
                });
              
            }
        },
        error: function () {
            alert("网络异常!")
        }
    });
}