jquery json遍历和动态绑定事件

最新推荐文章于 2025-09-13 21:59:18 发布

转载最新推荐文章于 2025-09-13 21:59:18 发布 · 95 阅读

文章标签：

本文介绍了一种使用Ajax和jQuery实现的动态数据加载方法，该方法能够在用户输入时从数据库中获取匹配项并显示在下拉列表中，提高用户体验。具体实现了当用户在输入框中输入时，通过Ajax调用后端接口查询数据库，返回匹配结果，并利用jQuery将这些结果显示在自定义的选择器中。

<div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text-align: left; overflow: auto;background:white;width:153px;'>
                    
                </div>

<script type="text/javascript">
$(document).ready(function () { 
    $("#engineerName").change(function () { 
        //ajax获取数据库查询得到的数据 
        var name = $("#engineerName").val(); 
        if(name != ""){
            $.ajax({ 
                type: "get", 
                dataType: "json",
                url:"${contextPath}/carUpload/enginNameByLike/" + name +"?random="+Math.random(), 
                success: function (result) {  
                    //清空原来的旧数据
                    $("#tmpselectorList").empty();
                    
                    var html = "<ul class='ui-menu' style='cursor: pointer;'>";
                     
                    //json数据遍历
                    $.each( result.data, function(index,item){ 
                        //alert("index:"+index+", item:"+ item);
                        html += "<li>"+item+"</li>"; 
                    });
                    
                    html += "</ul>";
                    $("#tmpselectorList").append(html);

                 } 
            }); 
        }
    });  
    
    //jquery动态绑定事件
    $("#tmpselectorList").on("click","ul li",function(){  
        //赋予值
        $("#engineerName").val( $(this).text() );
    }) ;
});
</script>