jQuery autocomplete example memo

最近用到又忘了怎麼做，在Model顯示卡了些關~寫個文章記錄下!!

//Head 需要Include的Resource
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

//補充顯示的CSS設定
<style type="text/css">
.ui-autocomplete { 
position: absolute; 
cursor: default;
z-index:99999 !important;   //有時候(使用Model)會顯示不在最前面，故設定大些
display:block;
}  
</style>

//Body
<form action="#" role="form" method="post" id="ListForm" >  
  <input type="text" class="form-control inputFieldClass" id="inValue" name="inValue" ></input>
  <input type="hidden" id="tx_value" name="tx_value" />  
   <input type="hidden" id="tx_lable" name="tx_lable" /> 
</form>

//如果回傳是一個Class，其中一個變數才是要用的jQuery.parseJSON(data)這樣處理
<script>
$(function (){
    $(".inputFieldClass").on("focus", function(){
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "API_URL", 
                    dataType: "json",
                    type: "POST",
                    data: {
                        key: request.term     
                      },
                    success: function (data) {
                    if (data.isSuccess){
                    response($.map(jQuery.parseJSON(data.jsondata), function (item) {
                            return {
                            value: item.in_value,      
                            lable: item.in_lable
                            }
                        }));
                    }
                    }
                });
            },
            minLength: 2,   //輸入多少字元觸發
            select : function(event, ui) {  
                //候選項選擇帶入
    $("#tx_value").val(ui.item.value);  
                $("#tx_lable").val(ui.item.lable);  
                return false;
            }
        });
    });
});
</script>