jqueryui autocomplete 自动填充备忘二（多选）

前面有一篇文章写了自动填充的， 最近使用到了多选填充， 用到了官网的例子， 但是自己改善了一下。

官网例子地址：http://jqueryui.com/autocomplete/#multiple

官网的例子太简单了， 我改善了一下，改善的地方如下：

1. 输入空格，逗号“,”或点击输入框弹出下拉框；
2. 设置加上delay: 0,   autoFocus: true；
3. 被选中的项不会再出现到下拉框里面；
4. 下拉框最下面加上一项提示，提示可以选择，也可以自由输入；
5. select 方法里面加上对选择的内容为空的处理；
6. 输入框获取焦点就弹出下拉框；
7. 因为第4步的原因，需要定义 _renderItem 方法。

效果图：

实现的原理是， 每次弹出下拉框前，会把输入框的值取出来，用逗号分组，最后一个逗号后面的值去过滤下拉框数据；

                      选中下拉框项后，同样是把输入框的值取出来，用逗号分组，把最后一个逗号后面的值去掉，加入选中的值。

html

<textarea id="my_bz" rows="2" style="width:580px"></textarea>

js

 $(function () {
            var availableTags = [
                "ActionScript",
      "AppleScript",
      "Asp",
      "C",
      "C++",
      "COBOL",
      "Erlang",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript"
            ];
            function split(val) {
                return val.split(/,\s*/);
            }
            function extractLast(term) {
                return split(term).pop();
            }

            $("#my_bz")
                // don't navigate away from the field on tab when selecting an item
                .on("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).autocomplete("instance").menu.active) {
                        event.preventDefault();
                    }
                }).click(function (event) {  #点击弹出下拉框
                    $(this).autocomplete("search");
                })
                .autocomplete({
                    minLength: 0,
                    delay: 0,        #立即加载
                    autoFocus: true,   #下拉框项自动获取焦点
                    position: { my: "right bottom", at: "right top" }, #向上弹出下拉框
                    source: function (request, response) {
                        // delegate back to autocomplete, but extract the last term
                        response($.ui.autocomplete.filter(
          #下拉框的过滤方法，我用了一个自定义的数组相减的方法， 
          #具体实现，就是通过输入框里面的字符串分割号最后面的字符去过滤数组
                            array_minus(availableTags,split(request.term)), extractLast(request.term)));
                    },
                    #最后面一项提醒
                    response: function (event, ui) {
                        var link = {
                            label: '<div><strong>多选,按空格或鼠标左键显示列表,<br>可以选取,也可自由输入文字</strong></div>',
                            value: ''
                        };

                        ui.content.push(link);
                    },
                    focus: function () {
                        // prevent value inserted on focus
                        return false;
                    },
                    select: function (event, ui) {

                        var terms = split(this.value);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        #选中的值不为空才加入到输入框数组
                        if (ui.item.value != '')
                            terms.push(ui.item.value);
                        // add placeholder to get the comma-and-space at the end
                        terms.push("");
                        this.value = terms.join(", ");
                        return false;
                    }
                }).focus(  #输入框获取焦点就弹出下拉框
                    function () {
                        $(this).autocomplete("search");
                    }
                ).autocomplete("instance")._renderItem = function (ul, item) {
                    //alert($(ul).html());
                    return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append('<div>' + item.label + '</div>')
                        .appendTo(ul);
                };;

        });

注意一点：array_minus(availableTags,split(request.term))  数组相减的方法，本来我是用了Array.prototype.minus 的，给Array 类型直接添加一个通用方法， 没想到，居然跟exportTable.js 冲突，并且是跟 replace 方法冲突，我排查了几乎所有方法，确认了是这个造成了 js 冲突， 但是冲突的原因我是想不出来了。