使用 Chosen 插件将所选文本选项以外的文本添加到选择中

Posted

技术标签:

【中文标题】使用 Chosen 插件将所选文本选项以外的文本添加到选择中【英文标题】:Adding text other than the selected text options to the select with the Chosen plugin 【发布时间】:2013-09-13 10:39:16 【问题描述】:

我正在使用the chosen plugin。

将此添加到我的文档中,我无法在文本字段中键入内容并将新项目添加到列表中。

$(document).ready(function ()    
    $(".chosen-select").trigger("chosen:updated");
);

这将允许将一些硬编码文本添加到列表中:

$(document).ready(function ()
    $('.chosen-select').chosen();
    $('.addsomething').click(function ()
        $(".chosen-select").prepend("<option>Utopia</option>");
        $(".chosen-select").trigger("chosen:updated");
    );
);

我希望看到的情况是,我希望能够在文本字段中添加文本,点击回车并添加我的条目(如果我没有选择它)。它不需要永久添加到选项列表中。

【问题讨论】:

【参考方案1】:

不确定是否可以以更简单的方式完成,但这很好用。代码中的 cmets 解释了每个步骤:

var select, chosen;

// Cache the select element as we'll be using it a few times
select = $(".chosen-select");

// Init the chosen plugin
select.chosen( no_results_text: 'Press Enter to add new entry:' );

// Get the chosen object
chosen = select.data('chosen');

// Bind the keyup event to the search box input
chosen.dropdown.find('input').on('keyup', function(e)

    // If we hit Enter and the results list is empty (no matches) add the option
    if (e.which === 13 && chosen.dropdown.find('li.no-results').length > 0)
    
        var option = $("<option>").val(this.value).text(this.value);

        // Add the new option
        select.prepend(option);
        // Automatically select it
        select.find(option).prop('selected', true);
        // Trigger the update
        select.trigger("chosen:updated");
    
);

这是一个工作示例:http://jsfiddle.net/jHvmg/436/

【讨论】:

您是否知道可以与多选版本一起使用的解决方案? 我不得不在最新的选择选择版本中调整代码(只是如何找到搜索字段)。而不是chosen.dropdown.find('input'),我不得不使用chosen.search_field。它适用于多项选择。【参考方案2】:

我从 Bogdan 修改了 the answer 以使用选定的 1.2.0 以及所有类型的选定选择:

var select, chosen;

// cache the select element as we'll be using it a few times
select = $(".chosen-select");

// init the chosen plugin
select.chosen();

// get the chosen object (any type, single or multiple)
chosen = $('.chosen-container');
// chosen = $('.chosen-select-single');
// chosen = $('.chosen-container-multi');

// Bind the keyup event to the search box input
chosen.find('input').keyup( function(e)

    // if we hit Enter and the results list is empty (no matches) add the option
    if (e.which === 13 && chosen.find('li.no-results').length > 0)
    
        var option = $("<option>").val(this.value).text(this.value);

        // add the new option
        select.prepend(option);
        // automatically select it
        select.find(option).prop('selected', true);
        // trigger the update
        select.trigger("chosen:updated");
    
);

【讨论】:

效果很好。我还建议更改默认文本以告诉用户按 Enter 键添加新元素。选择初始化时只需传入no_results_text: 'Press enter to add:'【参考方案3】:

一个简单的替代方法是使用 select2,它内置了标签: https://select2.github.io/examples.html#tags

$(".js-example-tags").select2(
  tags: true
)

【讨论】:

【参考方案4】:

这里有一篇文章如何在这里选择的选择列表中添加新值:

https://boundlessjourney.wordpress.com/2014/06/12/adding-new-values-to-chosen-plugin/

基本上你编辑 selected.jquery.js 文件并搜索 case 13: 并将 switch case 中的代码替换为

case 13:
 evt.preventDefault();
 if (this.results_showing) 
   if (!this.is_multiple || this.result_highlight) 
     return this.result_select(evt);
   
   $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
   $(this.form_field).trigger('chosen:updated');
   this.result_highlight = this.search_results.find('li.active-result').last();
   return this.result_select(evt);
  
  break;

这适用于多选,但就我而言,我希望能够添加一个选项。我在 cmets 中找到了答案,但它缺少代码,我添加了将每个单词大写的功能。

这可以通过将 switch case 中的代码替换为:

case 13:
  evt.preventDefault();
  if (this.results_showing) 

    if (this.result_highlight) 
      return this.result_select(evt);
    
    $(this.form_field).append('<option>' + ($(evt.target).val()).replace(/\w\S*/g, function(txt)return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();) + '</option>');
    $(this.form_field).trigger('chosen:updated');
    this.result_highlight = this.search_results.find('li.active-result').last();
    return this.result_select(evt);
  
  break;

也许可以编辑代码,使其可以接受多选和单选

【讨论】:

【参考方案5】:

AbstractChosen.prototype.choice_label 功能中的chosen.jquery.js 文件中,您可以更改选定的文本

这样

AbstractChosen.prototype.choice_label = function(item) 
      if (this.include_group_label_in_selected && (item.group_label != null)) 
        return "<b class='group-name'>" + (this.escape_html(item.group_label)) + "</b>" + item.html;
       else 
          return item.html.replace(/ *\([^)]*\) */g, "");;//Ashkufaraz Remove Post From Selected Text
      //  return item.html;
      
    ;

【讨论】:

【参考方案6】:

简单的代码

    var VAL = 1;
    var NM = "Aladein";
    $("#YourID").append('<option value="' + VAL + '">' + NM + '</option>');
    $("#YourID option:selected").val(VAL);
    $("#YourID option:selected").text(NM);
    $('#YourID').trigger("chosen:updated");

【讨论】:

【参考方案7】:

$('.choose').chosen();

$('.choose').on('chosen:no_results',function(evt, params)var value = params.chosen.search_results.find('span').text();$('.choose').append(new Option(value, value,true).outerHTML);$('.choose').trigger("chosen:updated"););

【讨论】:

以上是关于使用 Chosen 插件将所选文本选项以外的文本添加到选择中的主要内容,如果未能解决你的问题,请参考以下文章

Chosen.js 可以搜索选项的值及其文本吗?

如何防止Twitter typeahead用所选值填充输入?

用于单选的所选插件的占位符文本不起作用

select2 jQuery插件:获取所选选项的文本值? [复制]

如何将所选项目从 recyclerview 显示到文本输入

如何使用 System.Windows.Forms.Clipboard 将所选的文本或图像插入到剪贴板?