JQuery autocomplete ajax 實現自動完成，jqueryautocomplete

JQuery autocomplete ajax 實現自動完成，jqueryautocomplete

根據輸入框內容即時查詢展示， 類似百度輸入框效果。

廢話不多說， 上代碼。

1.引入外掛程式。

<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery/jquery.autocomplete.css"  /><script type="text/javascript" src="${ctx}/js/jqueryUI/jquery.ui.autocomplete.js"></script> 

2.JS代碼。

$( "#searchStreedRoad_auto" ).autocomplete({// searchStreedRoad_auto 輸入框id        source: function( request, response ) {            $.ajax({                url: ctx + '/gisQuery/gisAutoQuery.action', // 後台請求路徑                dataType: "json",                data:{                    "inputStr": request.term    // 擷取輸入框內容                },                success: function( data ) {                    response( $.map( $.parseJSON(data), function( item ) { // 此處是將返回資料轉換為 JSON對象，並給每個下拉項補充對應參數                        return {                             // 設定item資訊                             label: item.chinese_name +""+item.english_name, // 下拉項顯示內容                             value: item.chinese_name,   // 下拉項對應數值                             code:item.code, // 其他參數， 可以自訂                             object_id : item.object_id,<span style="font-family: Arial, Helvetica, sans-serif;"> // 其他參數， 可以自訂</span>                                                                                }                    }));                }            });        },        minLength: 2,  // 輸入框字元個等於2時開始查詢        select: function( event, ui ) { // 選中某項時執行的操作        // 存放選中選項的資訊        $("#g_code").val(ui.item.code);        $("#g_object_id").val(ui.item.object_id);                  }                  });

3. 效果。