Autocomplete，自訂義下拉樣式

jQuery-UI autocomplete subtext

2020-01-28 565 words 2 minutes

Contents

jQuery UI 是一個 javascript 套件，提供一些方便的樣式和介面工具 (官方網站：https://jqueryui.com)

此篇文章要紀錄的是其中的 autocomplete 如何自訂義其提示下拉的樣式

使提示的 menu option 也能有像 bootstrap-select 的 subtext 的效果

html:

1

<input class="autocomplete_fruit" type="text" />

javascript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


$('.autocomplete_fruit').autocomplete({
    minLength: 1,
    source: [
        {
            label: 'apple',
            price: 20
        },
        {
            label: 'banana',
            price: 15
        },
        {
            label: 'orange',
            price: 10
        }
    ],
    create: function (event, ui) {
        $(this).data('ui-autocomplete')._renderItem  = function (ul, item) {
            return $("<li>").attr('data-value', item.label).append(
                $("<div>").addClass('ui-menu-item-wrapper').append(
                    $("<b>").html(item.label).append(
                        $("<small>").addClass('text-muted pl-2').html(item.price)
                    )
                )
            ).appendTo(ul);
        };
    }
});

由例程式可知，用 _renderItem 這個 method 就可以直接改寫下拉中每一個 li 的內容(它的下拉結構是一個ulist)

比較奇怪的是如果這個 _rerenderItem 直接寫在 autocomplete 初始的物件參數中，會沒有作用，

一定要在 create 中呼叫，且乎叫時前面還要加上 .data(‘ui-autocomplete’) ，這點我也還想不明白

然後 _renderItem 這個函式要回傳 menu option(li) 的 jquery 物件，所以用 appendTo(ul)

如果用 $(ul).append($("<li>").....，則回傳的會是 ul 的物件

render 後的 menu 在滑鼠 hover 上去時 console 會一直 log 錯誤訊息

至於 li 中的 div 我在這邊給予他 ui-menu-item-wrapper 的 class

因為它的js、css會來抓這個class，讓滑鼠 hover 過去時會有藍底的 style

完成後的結果就如下圖：

詳細可看我的 codepen: https://codepen.io/ginnyzang/pen/yZobpv

參考資料：https://stackoverflow.com/questions/37045318/jquery-ui-custom-autocomplete-renderitem-and-rendermenu-not-working