js 动态下拉框

 1.问题描述

      在项目中使用输入值的下拉框，实现手动输入值，动态ajax请求后台 返回动态选择内容。

2.实现代码

HTML页面

<tr>
<td style="position:relative;">
    <input type="text" class="TextBox" id="ENGLISHCODE" name="ENGLISHCODE"
           onkeyup="javascript:metaTableDatacheckAdd.gb();"/>
    <div id="div" tabindex="-1"
         style="border:1px solid #000;background-color:#fefbbd;height:200px;overflow:auto;position:absolute;width:96%; display: none">
        <ul id="ul"></ul>
    </div>
</td>
</tr>

js方法

    //动态 select 输入框输入值  ajax请求后端 返回数据
    this.gb = function () {
        //获取到 输入框的值   查询数据库放前字段名
        var TABLENAME = document.getElementById("TABLENAME").value;
        var DATABASEID = document.getElementById("DATABASEID").value;
        var ENGLISHCODE = document.getElementById("ENGLISHCODE").value;
        var param = "TABLENAME=" + TABLENAME + "&DATABASEID=" + DATABASEID + "&ENGLISHCODE=" + ENGLISHCODE.toUpperCase();
        var request = new $WebRequest(baseUrl + "/***/***/***.do", param, function (result) {
            var data = result.data;
            if (data.length > 0) {
                $("#ul").empty();
                for (var i in data) {
                    //循环生成li  并插入  ul下
                    $("#ul").append("<li  style='overflow: auto' " +
                        "onclick=\"javascript:metaTableDatacheckAdd.liclick('" + data[i].ENGLISHCODE + "' )\"" +
                        "onmouseover=\"javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'\"\n" +
                        "onmouseout=\"javascript:if (this.className!='TableRowSelected') this.className='TableRow' \" >" + data[i].ENGLISHCODE + "</li>");
                    //div 显示
                    document.getElementById("div").style.display = "";
                 
                }
            } else {
                $("#ul").empty();
                //表中没有字段   点击关闭
                $("#ul").append("<li> 表中没有此字段！ </li>")
                document.getElementById("div").style.display = "";
            }

        });
        request.Start();
    };

    //li 标签点击事件   获取到当前值 赋值给 input
    this.liclick = function (ENGLISHCODE) {
        document.getElementById("ENGLISHCODE").value = ENGLISHCODE;
        //隐藏 div
        document.getElementById("div").style.display = "none";
    }

3.效果展示

4.注意事项