jquery.ui.autocomplete-Ajax

<link href="${ctx}/static/jquery-ui/css/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="${ctx}/static/jquery-ui/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${ctx}/static/jquery-ui/jquery-ui.custom.js"></script>
<script type="text/javascript" src="${ctx}/static/jquery-ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="${ctx}/static/jquery-ui/jquery.ui.core.js"></script>

//附件JS和CSS

---------------------------------------------------------------------------------------------------------------------------

<script type="text/javascript">

$(function() {
   var cache = {};
    $("#proName").autocomplete({
                source: function(request,response){
                 var term = request.term;
             if (term in cache) {
                data = cache[term];
                response( $.map( data, function( item ) {
                    return {
                        codeKey:item.codeKey,
                        codeValue:item.codeValue,
                    }
                }));
             } else {
                var url = "${ctx}/telePhoneManageAction.do?method=ajaxAutocomplete";
                 $.ajax({
                     url: url,
                     dataType: "json",
                     data:{
                         searchInfo: request.term     //ajax赋值后台
                     },
                     success: function( data ) {
                         cache[term] = data;
                         response( $.map( data, function( item ) {
                             return {
                                 codeKey:item.codeKey,
                                 codeValue:item.codeValue,
                             }
                         }));
                     }
                 });
             }
        },
        minLength: 1,
        select: function(event,ui) {
            $("#proName").val(ui.item.codeValue);
            $("#proID").val(ui.item.codeKey);
            return false;
        }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li>").append("<a>"+ item.codeValue + "</a></li>") .appendTo(ul);
    };
});

</script>

---------------------------------------------------------------------------------------------------------------------------

<input maxlength="50" size="20" type="text" id="proName"  name="proName" >

<input maxlength="50" size="20" type="text" id="proID" name="proID">

---------------------------------------------------------------------------------------------------------------------------

//Action

//searchInfo接收页面传入的值

public void ajaxAutocomplete(@Read(key = "searchInfo") String searchInfo) {
        if(StringUtils.isNotBlank(searchInfo)){
            searchInfo = new String(searchInfo.getBytes("iso-8859-1"), "UTF-8");
            List<CodeInfo> list = new ArrayList<CodeInfo>();

             # 自己赋值list
            String str = JSONArray.fromObject(list).toString();
            super.renderText(str);
        }
    }

---------------------------------------------------------------------------------------------------------------------------

//VO

public class CodeInfo implements Serializable {
    private java.lang.String codeKey;
    private java.lang.String codeValue;  

   #get

   #set

}