从带有复选框的jquery自动完成中选择多个选项 [英] Select mutiple options from jquery autocomplete with checkboxes

问题描述

我正在使用

但我想要的结果如下，当我们选中复选框时，自动填充不应该关闭，选中的选项应该填写相关的textarea与逗号分隔，当我们取消选中复选框时，该选项应该从textarea中删除。我可以更新textarea的文本。

这是我的小提琴

解决方案

我尝试过以下代码，我的目标是通过这个实现的。

Html

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

脚本

  var data = [
ActionScript，
AppleScript，
Asp，
BASIC，
C ++，
Clojure，
COBOL，
ColdFusion
]; 
 function split（val）{
 return val.split（/，\ s * /）; 
} 
函数extractLast（term）{
 return split（term）.pop（）; 
} 
函数bindAutoComplete（ele，options）{
 var text = ele.val（）; 
 text = text == null || text == undefined？ ：文字; 
 $（ele）.autocomplete（options）.data（autocomplete）._ renderItem = function（ul，item）{
 var checked =（text.indexOf（item.label +'，'） > -1？'checked'：''）; 
返回$（< 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） ）{
回复（$。map（数据，函数（项）{
返回{
 label：item 
} 
}））; 
} ，
焦点：function（）{
 //阻止值插入焦点
 // $（$ this）.autocomplete（search）; 
返回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 te rms = split（this.value）; 
 //删除当前输入
 terms.pop（）; 
 //添加所选项目
 terms.push（ui.item.value）; 
 //添加占位符以获得最后的逗号和空格
 terms.push（）; 
 this.value = terms.join（，）; 
} 
返回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）; 
}）
}）
  

这是我的工作小提琴

I am working with jquery autocomplete .

I am trying following code

Html

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

Script

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");
                }
          });
        })

By using this code I can select only one option at a time but i need to select multiple options using checkbox

Right now my result is showing like this

But I want result as follows and when we check box then autocomplete should not be close and selected options should be fill in related textarea with comma separation and when we uncheck checkbox then that option should be remove from textarea. And I can update text of textarea.

Here is my fiddle

解决方案

I have tried following code and my goal is achieved with this.

Html

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

Script

 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

这篇关于从带有复选框的jquery自动完成中选择多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！