1

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

Группированный input

2 ответа 2

3

Визуально похоже на плагин Select2, а конкретно Multiple select boxes:

<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Есть возможность вводить свои значения если нет в списке нужных, называются теги:

<script type="text/javascript">
$(".js-example-basic-multiple").select2({
    tags: true
});
</script>

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
5
  • Спасибо, но больше понравился скрипт самописный, который предложил Yuri. Он намного меньше по объему. Но Ваш ответ тоже полезен. Спасибо! 19 мар 2017 в 9:33
  • Все же плагин лучше, хотя большой объем, это жаль. 19 мар 2017 в 9:38
  • не подскажите как принимать данные теперь через POST, а то не могу принять их, приходит только один параметр. 19 мар 2017 в 10:12
  • 1
    input name сделайте в виде массива, если было name="country" сделайте name="country[]"
    – TheMY3
    19 мар 2017 в 14:45
  • Спасибо, совсем забыл про [] 19 мар 2017 в 17:28
3

Это называется Multiple input. Могу предложить три варианта:

  1. JQueryUI:

    $(function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
    
      function split(val) {
        return val.split(/,\s*/);
      }
    
      function extractLast(term) {
        return split(term).pop();
      }
    
      $("#tags")
        // don't navigate away from the field on tab when selecting an item
        .on("keydown", function(event) {
          if (event.keyCode === $.ui.keyCode.TAB &&
            $(this).autocomplete("instance").menu.active) {
            event.preventDefault();
          }
        })
        .autocomplete({
          minLength: 0,
          source: function(request, response) {
            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
              availableTags, extractLast(request.term)));
          },
          focus: function() {
            // prevent value inserted on focus
            return false;
          },
          select: function(event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
          }
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    
    <div class="ui-widget">
      <label for="tags">Tag programming languages: </label>
      <input id="tags" size="50">
    </div>

  2. Мой скрипт:

    // Скрипт
    $(function() {
      $('[role="select"]').each(function() {
        var e = this;
        // Обромляем содержимое в блок и добавляем ещё одно поле для добавления тегов
        $(e).html('<div role="field"></div><div role="list">' + $(e).html() + '</div>');
        var field = $(this).find('[role="field"]'), // Получаем блок с где будут сохраняться теги
          list = $(this).find('[role="list"]'); // Получаем блок с option
        $(e).val(''); // Создаём для элемента [role="select"] значение value
        // Проверяем, есть ли выбранные option
        if (list.find('option[selected]').length > 0) {
          // Если да, то создаём для каждого option функцию
          list.find('option[selected]').each(function() {
            var val = $(this).attr('value') || $(this).text(); // Получаем значение option из атрибута value или, если его нет, из содержимого
            // Проверяем, пустое ли поле с тегами
            if ($(e).val() == '') {
              $(e).val(val); // Если пустое, то просто добавляем значение val
            } else {
              $(e).val($(e).val() + ',' + val); // Если не пустое, то к содержимому добавляем запятую и значение option. Делаем что-то типа массива
            };
            var tag = $('<span role="tag">' + $(this).text() + ' <span role="remove">x</span></span>'); // Создаём тег
            tag.prop('index', $(this).index()).val(val); // Записываем в него индекс соответствующего option и 
            field.append(tag); // Добавляем тег в конец поля
            $(this).hide(); // Скрываем элемент option
          });
        };
        // Создаём функцию нажатия на option
        $(e).on('click', 'option', function() {
          var val = $(this).attr('value') || $(this).text(), // Получаем значение value элемента option и если его нет, то его содержимое
            valArr = $(e).val().split(','); // Создаём из значения value элемента [role="select"] массив, что бы проверить на наличие элемента
          // Проверяем, добавлено ли уже это значение в value элемента [role="select"], что бы пользователь не мог добавить копию значения
          if(valArr.indexOf(val) == -1){
            // Если значения в value элемента [role="select"] нет, то проверяем value на содержимое. Пустое ли оно
            if ($(e).val() == '') {
              // Если да, то просто добавляем val в value
              $(e).val(val);
            } else {
              // Если value не пустое, то к содержимому добавляем запятую и значение val. Создаём что-то вроде строчного массива
              $(e).val($(e).val() + ',' + val);
            };
            var tag = $('<span role="tag">' + $(this).text() + ' <span role="remove">x</span></span>'); // Создаём тег
            tag.prop('index', $(this).index()).val(val); // Записываем в тег индекс элемента option, на который нажали и его val
            field.append(tag); // Добавляем тег в конец поля
            $(this).hide(); // Прячем option
            list.hide(); // Скрываем список с option, для эффекта :)
          };
        // Создаём функцию нажатия на поле с тегами
        }).on('click', '[role="field"]', function() {
          list.toggle(); // Открываем или закрываем список с option при нажатии на поле с тегами
        // Создаём функцию удаления тега из списка при нажатии на [role="remove"]
        }).on('click', '[role="remove"]', function() {
          var optInx = $(this).parent('[role="tag"]').prop('index'), // Получаем из тега индекс соответствующего option
              val = $(this).parent('[role="tag"]').val(); // Получаем из тега value соответствующего option
          $(this).parent('[role="tag"]').remove(); // Удаляем тег
          list.find('option').eq(optInx).show(); // Ищем нужный option по индексу и показываем его
          var valArr = $(e).val().split(','); // Создаём из значений value элемента [role="select"] массив для удаления значения
          valArr.splice(valArr.indexOf(val),1); // С помощью функции indexOf ищем положение нужно value в массиве и удаляем его
          $(e).val(valArr.join(',')); // Создаём из массива строку и переписываем значение value в [role="select"]
        });
      });
      // Создаём функцию нажатия на любой элемент сайта
      $(document).click(function(e) {
        // Проверяем, нажатие было на элемент [role="field"] или нет
        if($(e.target).closest('[role="field"]').length == 0){
          // Если нет, то скрываем список option
          $('[role="list"]').hide();
        };
      });
    });
    
    // Проверка значение
    $(function() {
      $('button').click(function() {
        console.log($('[role="select"]').val());
      });
    });
    [role="select"] {
      display: inline-block;
      position: relative;
    }
    [role="select"] > [role="field"] {
      display: block;
      -webkit-appearance: menulist;
      box-sizing: border-box;
      align-items: center;
      white-space: pre;
      width: 300px;
      min-height: 27px;
      padding: 1px;
      -webkit-rtl-ordering: logical;
      color: black;
      background-color: white;
      cursor: default;
      border-width: 1px;
      border-style: solid;
      border-image: initial;
      border-radius: 0px;
      border-color: rgb(169, 169, 169);
      font-size: 13px;
      font-family: arial;
    }
    [role="select"] > [role="field"] > [role="tag"] {
      display: inline-block;
      background-color: #dddddd;
      padding: 3px;
      margin: 1px;
      border-radius: 3px;
    }
    [role="select"] > [role="field"] > [role="tag"] > [role="remove"] {
        display: inline-flex;
        margin-left: 3px;
        border-radius: 50%;
        background-color: #cfcfcf;
        width: 15px;
        height: 15px;
        cursor: pointer;
        justify-content: center;
        align-items: center;
    }
    [role="select"] > [role="list"] {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin: -1px 0 0 0;
      border: 1px solid #a9a9a9;
      background-color: white;
      font-size: 13px;
      font-family: arial;
    }
    [role="select"] > [role="list"] > option {
      display: block;
      color: black;
      cursor: pointer;
    }
    [role="select"] > [role="list"] > option:hover {
      background-color: #1b8bfa;
      color: white;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div role="select" name="myselect">
      <option value="Значение 1" selected>Пункт 1</option>
      <option value="Значение 2">Пункт 2</option>
      <option value="Значение 3">Пункт 3</option>
    </div>
    <button>Показать значение select</button>

  3. Другие библиотеки и отдельные скрипты: Bootstrap, Отдельный скрипт, MetroUICSS

3
  • Взял Ваш самописный, так как он меньше по объему, спасибо! 19 мар 2017 в 9:34
  • @Владимир, это радует :) Но я не уверен, что там нету костылей, так как писал давненько :-D
    – Yuri
    19 мар 2017 в 9:35
  • кстати, сейчас заметил, что мне трудно будет разобраться и времени особо нет, что бы выбранные данные приходили в посте, поэтому передумал) Сори, вынужден выбрать другой ответ с плагином правильный. 19 мар 2017 в 9:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.