jquery - 使用“选择”插件将选定文本选项以外的文本添加到选择中

Question

我正在使用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");
    });
});

我希望看到的情况是，我希望能够向文本字段添加文本，按回车键，如果我没有选择它，则添加我的条目。它不需要永久添加到选项列表中。

Answer 1

不确定是否可以以更简单的方式完成，但这工作得很好。代码中的注释解释了每个步骤:

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/