Как создать "поле тегов" с помощью jQuery (с текстовым полем ввода + тегами, разделенными запятой)

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

Пример будет такой, как YouTube или StackOverflow, пока мне не нужен он, чтобы проверить базу данных или что-то еще.

Спасибо!

Ответ 1

демонстрация jsBin

Нечто похожее на StackOverflow делает:

Позволяет буквенно-цифровой и +-.# (и обрезает пробелы!)
Преобразовать в нижний регистр
Создайте автоматически тег Box на focusOut Enter , (добавьте больше | с разделителями ключей)
Удалить поле тега при щелчке (с подтверждением)

$(function(){ // DOM ready

  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <span>php</span>
  <span>c++</span>
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

Ответ 2

Вам не обязательно изобретать колесо здесь. Для этой цели уже существует несколько библиотек/плагинов, одним из которых является Guillermo Rauch TextboxList. Здесь вы можете найти демонстрацию . Он уже имеет поддержку автозаполнения и довольно обширный API, что и является основным препятствием в любой реализации этого.

Исходная реализация использовала MooTools, но вы можете найти версию jQuery golive здесь.

Ответ 3

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

Я могу предоставить более подробную информацию или пример, если это необходимо, но это должно быть достаточно простым для кода.

Ответ 4

Используйте "Поддержка тегов" в списках select2: https://select2.github.io/examples.html

    $(".js-example-tags").select2({
  tags: true
})

Ответ 5

Я хотел создать поле тегов, которое использует Facebook для пометки людей, и нашел доступные варианты для раздувания и/или не делать ключевую вещь, которую я хотел: Требовать, чтобы тег существовал в списке предустановок (который можно извлечь из вызов AJAX.

Я начал с Roko C. Buljan answer, а затем добавил несколько важных вещей.

Клавиша со стрелкой
Требование заданных ответов, как я сказал выше.
data- атрибуты для простого сбора для ajax-сообщения.

Codepen для всех, кто интересуется