Как создать текстовое поле, которое может принимать теги, такие как выбор тега stackoverflow?
Мне нравится создавать текстовое поле, в котором можно выполнять поиск, выбирать или удалять несколько тегов и, наконец, отправлять его в базу данных.
Что-то вроде этого в stackoverflow:
Я пробовал использовать это:
<input list = "browsers">
<datalist id = "browsers">
<option value = "Internet Explorer">
<option value = "Firefox">
<option value = "Chrome">
<option value = "Opera">
<option value = "Safari">
</datalist>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать такой плагин:
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
Как можно ограничить ввод только списком значений?
Вы можете проверить это в документации, параметр source делает уловку: $('input').tagsinput({ itemValue: 'value', itemText: 'text', source: function(query) { return [{ "value": 1 , "text": "Amsterdam" }, { "value": 2 , "text": "Madrid" }]; } });
Это может помочь в выборе тега Stack Overflow -> Теги стека, а также использование таких фреймворков, как бутстрап, может сделать это намного проще, как уже упоминалось.
Как можно ограничить ввод только списком значений?
Хорошо, что вы можете сделать, это отключить ввод, а также раскрывающийся список, в котором список представлений находится в раскрывающемся списке. когда представление выбирается из раскрывающегося списка, оно удаляется из раскрывающегося списка и добавляется как тег в поле ввода. Когда тег удаляется из поля ввода, он снова добавляется в раскрывающийся список. Вы используете какие-нибудь фреймворки?
Я работаю над фреймворком
Вы можете использовать этот плагин JQuery
<link rel = "stylesheet" type = "text/css" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href = "css/jquery.tagit.css" rel = "stylesheet" type = "text/css">
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type = "text/javascript" charset = "utf-8"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type = "text/javascript" charset = "utf-8"></script>
<script src = "js/tag-it.js" type = "text/javascript" charset = "utf-8"></script>
<ul id = "myTags">
<!-- Existing list items will be pre-added to the tags -->
<li>Tag1</li>
<li>Tag2</li>
</ul>
<script type = "text/javascript">
$(document).ready(function() {
$("#myTags").tagit();
});
$("#myTags").tagit({
availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
readOnly: true,
});
</script>
Как можно ограничить ввод только списком значений?
$ ("# myTags"). tagit ({availableTags: ["C++", "java", "php", "javascript", "ruby", "python", "c"]});
@qwww см. эту легкую документацию об этом github.com/aehlke/tag-it/blob/master/README.markdown
@qwww Я добавляю вам пример. Пожалуйста, попробуйте и дайте мне свой отзыв
Я пробовал ... он не работает, возможно, из-за какого-то столкновения с моим css
Где ваш код javascript?