2010-07-12 JQuery UI combobox

jquery ui 是一個方便的 jquery 擴充庫,
Drupal 中最常用的就一定是 datepicker 了
免去了很多麻煩的日期選擇器
而且用法很多, 兩個一組的, "未來"限定的等等

而另一個很好用, 但不常用的就是一個 autocomplete 的擴充, combo box
它可以是單選 <select> 的完美替代品,
它包含一個 textfield 和一個button
在 textfield 輸入的時候就會將 <select> 內的相關選項以 autocomplete 方式顯示
或者按一下 button, 全個 <select> 內的選項都會顯示
令使用者可以使用類似 <select> 的方式選取

但它有兩個 bug
1. <select> 的 <option> 的 attribute selected=selected 不會預設被選中
做就了我在 github.com 的 commit (ref3)

2. autocomplete 的值不會被更新直至 autocomplete onblur
在選了combo box 後, 直接 submit 的話, 便會發現 <select> 的值沒有被更新
直至 <select> onblur 了, 使用 firebug 令會很清楚
而 fix 便是:

<script>
    minLength: 0,
    close: function(event, ui) {
        $(this).blur();
    }
</script>

ref: http://jqueryui.com/demos/datepicker/
ref2: http://jqueryui.com/demos/autocomplete/#combobox
ref3: http://github.com/joetsuihk/jquery-ui/commit/670f8bf4a3b1783db4733269c0b...

Google