JQuery UI之Autocomplete(3)

標籤：des   except   執行   菜單顯示   methods   headers   res   throws   als   

1、Autocomplete的屬性

首先引入css和js檔案，以及對應的HTML代碼如下：

<link href="../css/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script><script type="text/javascript" src="../js/jquery-ui.js"  ></script> <label for="language">搜尋：</lable><input id="language" name="language" type="text">

對應的後端java代碼如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doPost(request, response);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //前端發送的參數        String param=    request.getParameter("term");                response.setHeader("Access-Control-Allow-Origin", "*");        response.setHeader("Access-Control-Allow-Methods", "*");        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");                 response.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        List<String > namelist=new ArrayList<>();        namelist.add("a");        namelist.add("b");        namelist.add("c");        namelist.add("d");        String[] arr={"Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German"};                //將數組或者集合對象轉換成json返回到前端        PrintWriter printWriter=response.getWriter();        printWriter.print(JSONArray.toJSON(arr));        printWriter.flush();    }

主要有以下幾個屬性

autoFocus: true ,//預設值為false。如果設為true，在菜單顯示時，將預設選中第一項。
delay: 300,//預設值為300。指定在按鍵發生後多少毫秒後才觸發執行自動完成。
disabled:false,//預設值為false。是否禁用自動完成功能。
minLength: 0 //預設值為 1。指定觸發自動完成的最小輸入字元數，如果輸入的字元小於該長度，將不會觸發自動完成功能。將該值設為0，可以在不輸入字元的情況下顯示菜單(根據實測顯示，可能需要通過上下方向鍵來觸發)。
對應的js代碼如下：

$("#language").autocomplete({        source: "/Autocomplete.html",        autoFocus: true ,//預設值為false。如果設為true，在菜單顯示時，將預設選中第一項。        delay: 300,//預設值為300。指定在按鍵發生後多少毫秒後才觸發執行自動完成。        disabled:false,//預設值為false。是否禁用自動完成功能。        minLength: 0 //預設值為 1。指定觸發自動完成的最小輸入字元數，如果輸入的字元小於該長度，將不會觸發自動完成功能。將該值設為0，可以在不輸入字元的情況下顯示菜單(根據實測顯示，可能需要通過上下方向鍵來觸發)。    });

2、Autocomplete的事件

    $("#language").autocomplete({        source: "/Autocomplete.html",        minLength : 0,        //當輸入框內容發生改變時觸發次函數,event 是當前事件對象        change: function( event, ui ) { //            alert(ui.item.value);        },        close: function( event, ui ) {            // event 是當前事件對象            //alert("close");            // ui對象是空的，只是為了和其他事件的參數簽名保持一致        },        create: function( event, ui ) {            // event 是當前事件對象//            alert("create");            // ui對象是空的，只是為了和其他事件的參數簽名保持一致        },        focus: function( event, ui ) {            // event 是當前事件對象//            alert(ui.item.value);            console.log(ui.item.value);            // ui對象僅有一個item屬性，它表示當前擷取焦點的功能表項目對應的資料來源對象            // 該對象具有label和value屬性，以及其它自訂(如果有的話)的屬性            //取消該事件的預設行為( event.preventDefault() )，可以阻止輸入框的值被更改，但不會阻止功能表項目獲得焦點。            event.preventDefault();        },        open: function( event, ui ) {            // event 是當前事件對象//            alert("open");            // ui對象是空的，只是為了和其他事件的參數簽名保持一致        },        response: function( event, ui ) {            // event 是當前事件對象//            $(event).val( "df");            // ui對象僅有一個content屬性，它表示當前用於顯示菜單的數組資料            // 每個元素都是具有label和value屬性的對象            // 你可以對屬性變更，從而改變顯示的菜單內容        },        search: function( event, ui ) {            // event 是當前事件對象            console.log("fd");            // ui對象是空的，只是為了和其他事件的參數簽名保持一致        },        select: function( event, ui ) {            // event 是當前事件對象            console.log(ui.item.value);            // ui對象僅有一個item屬性，它表示當前被選中的功能表項目對應的資料來源對象            // 該對象具有label和value屬性，以及其它自訂(如果有的話)的屬性        }    });

其中還可以單獨的綁定事件：

//當輸入框內容發生改變時觸發次函數    $( "#language" ).on("autocompletechange", function( event, ui ) {        alert(ui.item.value);    } );

3、Autocomplete的主要方法：（Autocomplete的方法使用比較少）
close()：關閉智能提示選擇框。　　
destroy()：銷毀智能提示選擇框，將其所產生的元素完全刪除，使其恢複至初始狀態。
disable()：禁用自動完成功能。
enable()：開啟自動完成功能。

$( "#language" ).autocomplete( "disable" );$( "#language" ).autocomplete( "enable" );$( "#language" ).autocomplete( "search", "Chin" );

 

JQuery UI之Autocomplete(3)