input datalist 文本框输入下拉匹配数据库中数据

jsp页面:

<table id="recommendTagTable" border="0">
                    <thead>
                        <tr style="background:#EAF2FF;">
                            <th style="width:129px">标签名称</th>
                            <th style="width:103px">标签级别</th>
                            <th style="width:100px"><center><a href="#" onclick="addRow()"class="easyui-linkbutton" icon="icon-add" ></a></center>  </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ></tr>
                    </tbody>
                </table>

js:

<script type="text/javascript">

var checkidfun = function(obj){
        var id = obj.id;
        var number=id.substring(6);
        var name =$("#"+id).val();
        $.ajax({//动态获取数据库数据
            type:"POST",
            async:false,
            cache:false,
            url:ctx+"/recommendTagInfo/fetchRecommendTagInfoByName",
            data:{name:name},
            dataType:'json',
            error: function(request) {
                alert("操作失败!");
            },
            success: function(ret) {
                if(ret.list!="" && ret.list!=null){
                    var html ="";
                    for(var i=0;i<ret.list.length;i++){//拼接数据
                         html +='<option value="'+ret.list[i].name+'">'+ret.list[i].name+'</option>';
                    }
                        $("#wlmslist"+number).html(html);
                }
            }

        });
    }
    function addRow(){//增加一行
        var tid =$('#recommendTagTable tr').last().attr("id");
        var len=1;
        if(tid!=undefined){
            var trId = tid.substr(1,2);
            if(isNaN(tid.substr(1,2))){
                trId = "0";
            }
            len=parseInt(trId)+1;
        }
        var context="<tr id='t"+len+"' >";
        context+='<td><input  name="tagName" id="testid'+len+'" list="wlmslist'+len+'" onkeyup="checkidfun(this)" class="easyui-validatebox" data-options="required:true" type="text" style="width:120px;"/>'
        +'<datalist id="wlmslist'+len+'"></datalist></td>';
        context+='<td><input id="select'+len+'" name="weightLevel" style="width:100px;"/></td>';
        context+="<td width='100' align='center'><a  href='javascript:DeleteRowData(\""+len+"\")' class=''>删除</a></td>";
        context+='</tr>';
        $("#recommendTagTable tbody").append(context);
    }

    function DeleteRowData(rowid){//删除
        $("#t"+rowid+"").remove();
    }

</script>

猜你喜欢

转载自blog.csdn.net/world_the_begin/article/details/82589765
今日推荐