разрешить новые значения с selected.js множественным выбором - PullRequest
47 голосов
/ 12 сентября 2011

Я использую плагин selected.js http://harvesthq.github.com/chosen/ с jQuery, чтобы позволить пользователю выбирать из нескольких вариантов.Однако теперь я хочу позволить им создавать значения, которых еще нет - есть идеи, как это сделать?

РЕДАКТИРОВАТЬ: что-то похожее на собственную панель выбора / создания тегов SO было бы близко к тому, что мне нужно

Желательно без изменения или редактирования плагина, но будет делать, если потребуется.

Код: HTML:

<p>Select something</p>
<select name="theSelect[]" multiple="multiple">
    <option value="First Option">First Option</option>
    <option value="Second Option">Second Option</option>
</select>

Javascript:

$(function(){
    $('select').chosen();
});

Так что, если пользователь введет «Третий вариант», я бы хотел добавить это ксписок и выбрать его.Значение и отображаемое имя / будут одинаковыми, поэтому это не проблема

Ответы [ 10 ]

25 голосов
/ 12 сентября 2011

Согласно документации, вы можете попробовать сделать что-то вроде этого:

$('select').append('<option>test</option>');
$('select').trigger('liszt:updated');

Как сказал Тони в комментариях ниже:

"Начиная с версии 1.0, выбранный триггер сейчас": обновлено "

19 голосов
/ 26 марта 2012

Я наткнулся на это, ища те же идеи. Похоже, это довольно популярный запрос, и пара вилок реализовали его. Похоже, он скоро будет добавлен в основную ветку.

+ 1 для этой конкретной тяги, которая сработала: https://github.com/harvesthq/chosen/pull/166

Вы можете посмотреть вилку Коэнпунта здесь: https://github.com/koenpunt/chosen

11 голосов
/ 25 июля 2014

Вот простой способ, которым я это сделал:

$(".search-field").find("input").live( "keydown", function (evt) {
    var stroke;
    stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
    if (stroke == 9) { // 9 = tab key
        $('#tags').append('<option value="' + $(this).val() + '" selected="selected">' + $(this).val() + '</option>');
        $('#tags').trigger('chosen:updated');
    }
});
10 голосов
/ 14 марта 2012

Я просто пытался решить ту же проблему. Я немного изменил исходный код. Вот новая функция keyup_checker. Взгляните на случай 13:

AbstractChosen.prototype.keyup_checker = function(evt) {
  var stroke, _ref;
  stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
  this.search_field_scale();
  switch (stroke) {
    case 8:
      if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) {
        return this.keydown_backstroke();
      } else if (!this.pending_backstroke) {
        this.result_clear_highlight();
        return this.results_search();
      }
      break;
    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('liszt:updated');
        this.result_highlight = this.search_results.find('li.active-result').last();
        return this.result_select(evt);
      } 
      break;
    case 27:
      if (this.results_showing) this.results_hide();
      return true;
    case 9:
    case 38:
    case 40:
    case 16:
    case 91:
    case 17:
      break;
    default:
      return this.results_search();
  }
};
5 голосов
/ 19 февраля 2013

Я знаю, что это не ответ, а альтернативное решение.

Я искал компонент для добавления на лету и обнаружил, что http://ivaynberg.github.com/select2/#tags предоставляет то же самое, что и выбранный + другие материалы, такие как «Пометка».

4 голосов
/ 18 октября 2012

Вы можете просто прикрепить событие к текстовому полю ввода, чтобы прослушать код конкретного символа. После этого добавьте параметр и запустите обновление в раскрывающемся списке.

 var dropDown = $('select.chosen');
 dropDown.parent().find('.chzn-container .chzn-search input[type=text]').keydown( function (evt) {
           var stroke, _ref, target, list;
           // get keycode
           stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
           target = $(evt.target);               
           // get the list of current options
           list = target.parents('.chzn-container').find('.chzn-choices li.search-choice > span').map(function () { return $(this).text(); }).get();
           if (stroke === 9 || stroke === 13) {
              var value = $.trim(target.val());
              // if the option does not exists
              if ($.inArray(value,list) < 0) {
                 var option = $('<option>');
                 option.text(value).val(value).appendTo(dropDown);
                 option.attr('selected','selected');
                 // add the option and set as selected
              }
              // trigger the update event
              dropDown.trigger("liszt:updated");
              return true;
           }
        });
1 голос
/ 17 июня 2016

Я обновил код из 3nochroot еще раз.Теперь у меня есть только один селектор, чтобы найти вход множественного выбора.

$(document).ready(function() {
$(".js-choicelist").chosen({
    //config comes here
}).parent().find('.chosen-container .search-field input[type=text]').keydown(
    function (evt) {
        var stroke, _ref, target, list;
        // get keycode
        stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
        // If enter or tab key
        if (stroke === 9 || stroke === 13) {
            target = $(evt.target);
            // get the list of current options
            chosenList = target.parents('.chosen-container').find('.chosen-choices li.search-choice > span').map(function () { return $(this).text(); }).get();
            // get the list of matches from the existing drop-down
            matchList = target.parents('.chosen-container').find('.chosen-results li').map(function () { return $(this).text(); }).get();
            // highlighted option
            highlightedList = target.parents('.chosen-container').find('.chosen-results li.highlighted').map(function () { return $(this).text(); }).get();
            // Get the value which the user has typed in
            var newString = $.trim(target.val());
            // if the option does not exists, and the text doesn't exactly match an existing option, and there is not an option highlighted in the list
            if ($.inArray(newString,matchList) < 0 && $.inArray(newString,chosenList) < 0 && highlightedList.length == 0) {
                // Create a new option and add it to the list (but don't make it selected)
                var newOption = '<option value="' + newString + '">' + newString + '</option>';
                var choiceSelect = target.parents('.select-multiple').find('select');
                choiceSelect.prepend(newOption);
                // trigger the update event
                choiceSelect.trigger("chosen:updated");
                // tell chosen to close the list box
                choiceSelect.trigger("chosen:close");
                return true;
            }
            // otherwise, just let the event bubble up
            return true;
        }
    }
)

})

1 голос
/ 19 января 2015

Обновление ответа leogdion, которое работает с более поздними версиями:

        var dropDown = $('#select_chosen');
        // Make the chosen drop-down dynamic. If a given option is not in the list, the user can still add it
        dropDown.parent().find('.chosen-container .search-field input[type=text]').keydown( 
            function (evt) {
               var stroke, _ref, target, list;
               // get keycode
               stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
               // If enter or tab key
               if (stroke === 9 || stroke === 13) {
                   target = $(evt.target);               
                   // get the list of current options
                   chosenList = target.parents('.chosen-container').find('.chosen-choices li.search-choice > span').map(function () { return $(this).text(); }).get();
                   // get the list of matches from the existing drop-down
                   matchList = target.parents('.chosen-container').find('.chosen-results li').map(function () { return $(this).text(); }).get();
                   // highlighted option
                   highlightedList = target.parents('.chosen-container').find('.chosen-results li.highlighted').map(function () { return $(this).text(); }).get();
                   // Get the value which the user has typed in
                   var newString = $.trim(target.val());
                   // if the option does not exists, and the text doesn't exactly match an existing option, and there is not an option highlighted in the list
                   if ($.inArray(newString,matchList) < 0 && $.inArray(newString,chosenList) < 0 && highlightedList.length == 0) {
                     // Create a new option and add it to the list (but don't make it selected)
                     var newOption = '<option value="' + newString + '">' + newString + '</option>';
                     $("#select").prepend(newOption);
                     // trigger the update event
                     $("#select").trigger("chosen:updated");
                     // tell chosen to close the list box
                     $("#select").trigger("chosen:close");
                     return true;
                  } 
                  // otherwise, just let the event bubble up
                  return true;
               }
            }
        )
0 голосов
/ 02 октября 2018

Я попробовал несколько решений, приведенных здесь и в других местах, однако ни одно из них не сработало в selected.js 1.8.5 (jQuery: 3.3.1), и поэтому я получил следующее, поскольку не хотел использовать форк, который может не всегда быть в курсе главной ветки:

Для случая, когда я не хочу, чтобы какой-либо .chosen-select позволял новые значения, я добавил новый класс .chosen-newValuesAllowed. Я установил обработчик событий для этого класса, где CTRL + I добавляет новое значение, если его еще нет. Фокус на поле ввода впоследствии не теряется. В моем примере я проверяю innerHTML, поскольку @value фактически содержит идентификаторы базы данных, и поэтому новое значение, которое является строкой в ​​моем примере, которое будет обработано сервером позже, никогда не будет найдено в @value. Если вы хотите проверить @value, посмотрите комментарий внутри фрагмента. Код обрабатывает одиночный и множественный выбор.

$(document).on("keydown", ".chosen-container.chosen-newValuesAllowed input", function(e) { 
if (e.ctrlKey === true && e.keyCode === 73) { // CTRL + I
    e.preventDefault();
    var newValue = $(this).val();
    if (newValue) {            
        try {
            // only add if there is no option having the content/text of "input" yet!
            // instead of filter() for the content of <option> you can check on its @value by: find("option[val='...']") 
            var $selectElement = $(e.target).closest("div.chosen-container").prev(); // the previous sibling should be the <select>. If not, grab it some other way, e.g. via @id
            if (!$selectElement.find("option").filter(function () { return $(this).html() === newValue; }).length) {
                if (!$selectElement.attr("multiple")) { // unselect for single-select 
                    $selectElement.val('');
                }
                $selectElement.append('<option val="' + newValue + '" selected>' + newValue + '</option>');
                $selectElement.trigger('chosen:updated');    
            }
        } catch(error) {
            // pass
        }
        e.target.focus();
    }        
    return false; 
}
});

Другим решением было бы вызвать выбранную триггерную функцию : no_results , если новые значения следует добавлять только в том случае, если явного результата нет:

$(".chosen-select.chosen-newValuesAllowed").on("chosen:no_results", function(e, data){
       var newValue = data.chosen.get_search_text();
       ...
 });
0 голосов
/ 27 июля 2018

Обновление ответа leogdion для множественного выбора ( gist )

  $(".chosen-select-with-add-new").chosen({
    no_results_text: "Click Enter or Tab to add new option",
    width: '100%'
  }).parent().find('.chosen-container .search-field input[type=text]').keydown(function (evt) {
    // get keycode
    const stroke = evt.which != null ? evt.which : evt.keyCode;
    // If enter or tab key
    if (stroke === 9 || stroke === 13) {
      const target = $(evt.target);
      // get the list of current options
      const chosenList = target.parents('.chosen-container').find('.chosen-choices li.search-choice > span').map(function () { return $(this).text(); }).get();
      // get the list of matches from the existing drop-down
      const matchList = target.parents('.chosen-container').find('.chosen-results li').map(function () { return $(this).text(); }).get();
      // highlighted option
      const highlightedList = target.parents('.chosen-container').find('.chosen-results li.highlighted').map(function () { return $(this).text(); }).get();
      // Get the value which the user has typed in
      const newString = $.trim(target.val());
      // if the option does not exists, and the text doesn't exactly match an existing option, and there is not an option highlighted in the list

      if ($.inArray(newString, matchList) < 0 && $.inArray(newString,chosenList) < 0 && highlightedList.length == 0) {
        // Create a new option and add it to the list (but don't make it selected)
        const newOption = '<option value="' + newString + '" selected="selected">' + newString + '</option>';
        const choiceSelect = target.parents('.chosen-container').siblings('.chosen-select-with-add-new');
        choiceSelect.append(newOption);
        // trigger the update event
        choiceSelect.trigger("chosen:updated");
        // tell chosen to close the list box
        choiceSelect.trigger("chosen:close");
        return true;
      }
      // otherwise, just let the event bubble up
      return true;
    }
  })

Пример использования на рельсах (тонкий)

  .tag-list
    label.control-label.h5 Tag list
    = select_tag :tag_list, options_for_select(ActsAsTaggableOn::Tag.order('taggings_count desc').pluck(:name), @publication.tags.map(&:name)), multiple: true, data: { placeholder: 'north, east, south, west' }, class: 'chosen-select-with-add-new'
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...