动态添加选项以选择多个JQuery插件 [英] Dynamically add option to chosen select multiple JQuery plugin

问题描述

我想在选定的多个输入的文本字段中添加用户输入的文本作为选项，并自动选择它，当选项不存在时，所有这一切，如果选项存在，那么我想选择它。到目前为止，我已设法做到这一点：

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 select it. So far I have manage to do this:

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键时我都会调用此函数，而输入字段在<$ c内成为焦点$ c> keydown_check 功能。

I call this function whenever the users presses enter while the input field is in focus within the keydown_check function.

我有两个问题：

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

例如：如果我有选项foo，并开始输入fo，则选择将标记第一个
选项作为候选（foo），所以如果我按回车，它应该被选中，但相反，发生的是fo被添加为一个选项并被选中，当我真的想要选择富。

For instance: If I have the option "foo", and start typing "fo", chosen will mark the first option as candidate ("foo"), so if I press enter, it should be selected, but instead, what happens is that "fo" is added as an option and selected, when I actually wanted to select "foo".

如果我点击选择foo，那么一切正常。选择选项标记，子字符串文本作为选项的一部分。

If I select "foo" with a click, then everything works fine. The option chosen marks is selected and the substring text is taken as part of the option.

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

How can I add a non existent option to chosen, without loosing all the original functionality?

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

• How can I access the select multiple field I initilized whith chosen inside the chosen plugin? As you can see in the code above, the id of the select multiple field is hardcoded. I want to do this to be able to refresh the select when the user adds a new option.

我正在寻找的功能非常类似于 linkedin 的技能小部件

The functionality that I'm looking for is very similar to the skills widget of linkedin

提前致谢！

推荐答案

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

I needed this today so I wrote something like this:

$(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标签对象。

"#"newtag is a form, ".alajax" is a plugin that sends form data in async way and returns server's response in JSON format. In the controller I check if a tag exists otherwise I create it. In response I five "jsoned" tag object.

这篇关于动态添加选项以选择多个JQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！