jquery-ul-autoComplete

<link type="text/css" rel="stylesheet" href="<%=path%>/style/jquery-ui/jquery.ui.all.css" />

<style>

.ui-autocomplete {
                max-height: 200px;
                overflow-y: auto;
                overflow-x: hidden;
                font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
                font-size: 12px;
            }

</style>

<script language="javascript" type="text/javascript" src="<%=path%>/js/jquery-1.6.2.js"></script>

<script language="javascript" type="text/javascript" src="<%=path%>/js/jquery.ui.core.js"></script>
<script language="javascript" type="text/javascript" src="<%=path%>/js/jquery.ui.widget.js"></script>
<script language="javascript" type="text/javascript" src="<%=path%>/js/jquery.ui.position.js"></script>

<script language="javascript" type="text/javascript" src="<%=path%>/js/jquery.ui.menu.js"></script>

<script>

$(function() {
    //解决中文问题
    $('#unitName').bind( "input.autocomplete", function(){
        $(this).trigger('keydown.autocomplete');

    });
    $( "#unitName" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                type:"post",
                url:"<%=path%>/webservice/healthCenters.action",
                data:"healthCenterName="+$("#unitName").val(),
                dataType: "json",
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        return {
                            label: item.name,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 1
        
    });
    
});

</script>