Подскажите пожалуйста такой скрипт или плагин, который реализует input с возможностью добавлять или удалять слова, фразы. Прошу прощения, я даже не знаю как назвать его.
2 ответа
Визуально похоже на плагин 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>
-
Спасибо, но больше понравился скрипт самописный, который предложил Yuri. Он намного меньше по объему. Но Ваш ответ тоже полезен. Спасибо!– Владимир19 мар 2017 в 9:33
-
-
не подскажите как принимать данные теперь через POST, а то не могу принять их, приходит только один параметр.– Владимир19 мар 2017 в 10:12
-
1input name сделайте в виде массива, если было name="country" сделайте name="country[]"– TheMY319 мар 2017 в 14:45
-
Это называется Multiple input. Могу предложить три варианта:
-
$(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>
Мой скрипт:
// Скрипт $(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>
Другие библиотеки и отдельные скрипты: Bootstrap, Отдельный скрипт, MetroUICSS
-
-
@Владимир, это радует :) Но я не уверен, что там нету костылей, так как писал давненько :-D– Yuri19 мар 2017 в 9:35
-
кстати, сейчас заметил, что мне трудно будет разобраться и времени особо нет, что бы выбранные данные приходили в посте, поэтому передумал) Сори, вынужден выбрать другой ответ с плагином правильный.– Владимир19 мар 2017 в 9:37