7

I want to add the text that a user inputs in the text field of a chosen select multiple input as an option, and automatically select it, all of this when the option doesn't exists, if the option exists, then I would like to选择它。到目前为止，我已经设法做到这一点：

Chosen.prototype.add_text_as_option = function () {
    $('#id_select').append(
        $('<option>')
                .html(this.search_field.val())
                .attr('selected', 'selected')
                .attr('value', 0)
    );
    $('#id_select').trigger("liszt:updated");
    return false;
};

每当用户在输入字段在函数中处于焦点时按 Enter 键时，我都会调用此keydown_check函数。

我有两个问题：

  • 最高优先级，当用户按下回车键并输入选项的子字符串时，该选项不会被选中，但子字符串文本将被添加并选中。不是我想要的。

例如：如果我有选项“foo”，并开始输入“fo”，选择会将第一个选项标记为候选（“foo”），所以如果我按下回车键，它应该被选中，但是，发生的事情是当我实际上想选择“foo”时，将“fo”作为选项添加并选择。

如果我通过单击选择“foo”，那么一切正常。选择的选项标记被选中，子字符串文本被作为选项的一部分。

如何在不丢失所有原始功能的情况下添加不存在的选项？

  • 如何访问我在所选插件中选择的多选字段？正如您在上面的代码中看到的，选择多个字段的 id 是硬编码的。我想这样做是为了在用户添加新选项时能够刷新选择。

  • 我正在寻找的功能与linkedin的技能小部件非常相似

4

5 回答 5

1

我今天需要这个，所以我写了这样的东西：

$(function() {
    // form id
    $('#newtag').alajax({
        // data contains json_encoded array, sent from server
        success: function(data) {
            // this is missing in alajax plugin
            data = jQuery.parseJSON(data);
            // create new option for original select
            var opt = document.createElement("OPTION");
            opt.value = data.id;
            opt.text = data.name;
            opt.selected = true;
            // check if the same value already exists
            var el = $('#tags option[value="' + opt.value + '"]');
            if( !el.size() ) {
                // no? append it and update chosen-select field
                $('#tags').append( opt ).trigger("chosen:updated");
            } else {
                // it does? check if it's already selected
                if(!el[0].selected) {
                    // adding already existent element in selection
                    el[0].selected = true;
                    $('#tags').trigger("chosen:updated");
                } else {
                    alert("Already selected and added.");
                }
            }


        }
    })
});

"#"newtag 是一个表单，".alajax" 是一个插件，它以异步方式发送表单数据并以 JSON 格式返回服务器的响应。在控制器中，我检查标签是否存在，否则我创建它。作为回应，我有五个“jsoned”标签对象。

于 2014-11-05T16:07:47.113 回答
1

您应该尝试基于所选插件的 select2 插件，但它适用于动态添加元素。

这是链接：http: //ivaynberg.github.com/select2/

查看自动标记化的示例，我认为这可能是您正在寻找的。

于 2013-03-28T19:55:01.573 回答
1

我创建了一个 jquery 的 jsfiddle，它接受文本并作为选项创建。在早期版本的 jquery 中选择了设施创建选项。

create_option: true;
persistent_create_option: true;
skip_no_results: true;

您可以使用以下代码：

$('#id_select').chosen({
    width: '100%', 
    create_option: true, 
    persistent_create_option: true, 
    skip_no_results: true
});

jsfiddle 链接： https ://jsfiddle.net/n4nrqtek/

于 2016-12-20T06:51:59.097 回答
0

只需调用它 keyup_check keydown_check 在按下的字母被初始化之前调用，不像 keyup_check

于 2013-11-17T00:00:12.073 回答
-1

我找到了一个解决方案多选

var str_array = ['css','html'];
$("#id_select").val(str_array).trigger("chosen:updated");
于 2018-01-25T22:54:31.873 回答