Jquery-ui autocomplete

最近公司在公司接到一個臨時性的修改公司管理系統任務，這個系統是使用JFinal進行開發的，JFinal可是我從來就沒有接觸過的東西啊，隻是以前聽說的，開發效率挺高的一個架構。好像有點偏題了啊，我明明寫的是Jquery-ui  autocomplete。言歸正傳Jquery-ui  autocomplete也是我在這個項目中使用的。

以前總是使用自己封裝的今天遇到Jquery-ui  autocomplete，覺得這挺好用的，然後把自己在項目中的使用記錄一下。

使用Jquery-ui  autocomplete首先你的頁面中需要一個html的input輸入框吧！

<input id="inputText" type="text" name="name" />
           

系統的背景傳回一個json數組

[{"name":"name111111", "type":"type111111", "value":"111111"},
    {"name":"name222222", "type":"type222222", "value":"222222"},
    {"name":"name333333", "type":"type333333", "value":"333333"}
]
           

在頁面中我們通過綁定事件，将輸入框綁定自動填充事件。

$('#inputText').autocomplete({
    source : function(){
        $.ajax(
            url:'自己的URL路徑',
            dataType: 'json',
            data:{
                "請求參數": request.term//這是在input中輸入的參數
            },
            success : function(data){
                response(data);//這裡是你需要處理的資料，在這裡可以對不需要的資料進行二次過濾
            }
        );
    },
    minLength : 1,
    autoFocus : true,
    select : function(event, ui){
        使用者點選後的操作
        return false;//這需要傳回false，否則選中的資訊無效
    }
}).autocomplete("instance")
._renderItem = function(ul, item){
    return $('<li>').append(item.type+"---"+item.name).appendTo(ul);
};