JQuery UI+Autocomplete+ajax 實現自動完成

2019-02-26

4429
0

做個筆記, 免得又忘了

JQuery UI+Autocomplete+ajax+json 實現自動完成

並配合多個input field

前端

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <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">

<script>
        $(function ()
        {
            $(".inputFieldClass").on("focus", function(){
                $(this).autocomplete({
                    source: function (request, response)
                    {
                        $.ajax({
                            url: "後端的資料來源網址", //.asp, .aspx, .ashx 或.php都可以
                            dataType: "json",
                            data: {
                                key: request.term      //回傳的參數
                            },
                            success: function (data)
                            {
                                response($.map(data.XXX, function (item)
                                {
                                    return {
                                        label: item.label,      //自動完成列表的顯示文字
                                        value: item.label       //自動完成列表選項的值......選取後會呈現在輸入框的值
                                        //value: item.value     //如果jSon字串中有value的值  
                                    }
                                }));
                            
                            }
                        });
                    },
                    minLength: 2
                });
            });
        });
    </script>

<input type="text" id="tags1" class="inputFieldClass">
<input type="text" id="tags2" class="inputFieldClass">
<input type="text" id="tags3" class="inputFieldClass">
<input type="text" id="tags4" class="inputFieldClass">
<input type="text" id="tags5" class="inputFieldClass">

後端傳來的jSon字串為

{"XXX":[{"label":"A"},{"label":"B"},{"label":"C"}]}

或者

{"XXX":[{"label":"A", "value":1},{"label":"B","value":2},{"label":"C","value":3}]}

回首頁