从带有复选框的jquery自动完成中选择多个选项

Question

我正在与jquery autocomplete 合作。

我正在尝试以下代码

HTML

<textarea class="search-element"></textarea>

脚本

var data = [
               "ActionScript",
               "AppleScript",
               "Asp",
               "BASIC",
               "C++",
               "Clojure",
               "COBOL",
               "ColdFusion"
        ];
        $(function () {
            var $this;
            var singleSelectOptions = {
                source: function (request, response) {
                   response($.map(data, function (item) {
                      return {
                        label: item,
                      }
                   }));
                },
                select: function (event, ui) {
                   $($this).autocomplete("close");
                   $($this).val($($this).val() + '\n' + ui.label)
                 },
                 minLength: 0,
                 open: function () {
                    $("ul.ui-menu").width($(this).innerWidth());
                 }
            }
            $(document).find('textarea[class*="search-element"]').live('keydown', function () {
                $($this).autocomplete(singleSelectOptions);
            }).live('focus', function () {
                $this = $(this);
                var text = $this.val();
                if (text == '') {
                    $($this).autocomplete(singleSelectOptions);
                    $($this).autocomplete("search");
                }
          });
        })

通过使用此代码，我一次只能选择一个选项 但我需要使用复选框选择多个选项

现在我的结果是这样的

但我希望结果如下，当我们选中复选框时，自动完成不应该关闭，并且选定的选项应该用逗号分隔填充相关的 textarea，当我们取消选中复选框时，应该从 textarea 中删除该选项。我可以更新 textarea 的文本。

Here is my fiddle

Answer 1

我尝试了以下代码，我的目标由此实现。

HTML

 <textarea class="multiselect-element"></textarea>

脚本

 var data = [
                   "ActionScript",
                   "AppleScript",
                   "Asp",
                   "BASIC",
                   "C++",
                   "Clojure",
                   "COBOL",
                   "ColdFusion"
            ];
            function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}
function bindAutoComplete(ele, options) {
    var text = ele.val();
    text = text == null || text == undefined ? "" : text;
    $(ele).autocomplete(options).data("autocomplete")._renderItem = function (ul, item) {
        var checked = (text.indexOf(item.label + ', ') > -1 ? 'checked' : '');
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append('<a href="javascript:;"><input type="checkbox"' + checked + '/>' + item.label + '</a>')
            .appendTo(ul);
    };
}
$(function () {
    var $this;
    var multiSelectOptions = {
        minLength: 0,
        source: function (request, response) {
            response($.map(data, function (item) {
                return {
                    label: item
                }
            }));
        },
        focus: function () {
            // prevent value inserted on focus
            //$($this).autocomplete("search");
            return false;
        },
        select: function (event, ui) {
            var text = $this.val();
            text = text == null || text == undefined ? "" : text;
            var checked = (text.indexOf(ui.item.value + ', ') > -1 ? 'checked' : '');
            if (checked == 'checked') {
                this.value = this.value.replace(ui.item.value + ', ', '')
            }
            else {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(", ");
            }
            return false;
        },
        open: function () {
           $("ul.ui-menu").width($(this).innerWidth());
        }
    }
    $(document).find('textarea[class*="multiselect-element"]').live('keydown', function () {
        bindAutoComplete($this, multiSelectOptions);
    }).live('focus', function () {
        $this = $(this);
        var text = $this.val();
        bindAutoComplete($this, multiSelectOptions);
        $($this).autocomplete("search");
    })
})

Here is my working fiddle

Answer 2

http://www.jqueryscript.net/demo/Multi-Select-Autocomplete-Dropdown-Plugin-For-jQuery-MSelectDialogBox/

参见 --> 参考第二个演示