Как реализовать форму HTML, которая принимает ввод текста, предназначенный для значений тега / хэштега? - PullRequest
Новая
       23

Как реализовать форму HTML, которая принимает ввод текста, предназначенный для значений тега / хэштега?

0 голосов
/ 02 июля 2019

Обновление 1

Мне удалось найти решение под названием Tagify (https://github.com/yairEO/tagify#jquery-version), но у меня возникли проблемы с его реализацией. Вначале я пытаюсь реализовать только простейшую версию Tagify.

Ниже приведено содержимое моего файла show.ejs.

Как и следовало ожидать, у меня также есть папка маршрутов, содержащая маршруты и логику CRUD, но я не думаю, что для этого нужно коснуться?

Я также выполнил команду для установки модуля Tagify в моей папке node_modules, но мне не совсем ясно, куда мне следует импортировать содержимое этой папки и нужно ли мне это делать 

import tagify from ....

или 

var Tagify = require("...")

хотя я считаю, что это последнее. 

<% include ../partials/header %>

        <div class="container">
            <div class="row">
                <h1 style="text-align: center">Create a New Entry</h1>
                <div style="width: 30%; margin: 25px auto;">
                    <form action="/events" , method="POST">
                        <div class="form-group">
                            <input class="form-control" type="text" name="name" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="number" name="price" placeholder="Price" min="0.01" step="0.01">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" name="image" placeholder="image url">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" name="description" placeholder="Describe the place">
                        </div>
                        <div class="form-group">
                            <textarea name='tags2' placeholder='Movie names'>The Matrix, Pulp Fiction, Mad Max</textarea>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-lg btn-primary btn-block">Submit!</button>
                        </div>

                    </form>

                    <a href="/events">View all events</a>
                </div>
            </div>

        </div>

        <script type="text/javascript">
            var input = document.querySelector('textarea[name=tags2]'),
                tagify = new Tagify(input, {
                    enforceWhitelist: true,
                    whitelist: ["The Shawshank Redemption", "The Godfather", "The Godfather: Part II", "The Dark Knight", "12 Angry Men", "Schindler's List", "Pulp Fiction", "The Lord of the Rings: The Return of the King", "The Good, the Bad and the Ugly", "Fight Club", "The Lord of the Rings: The Fellowship of the Ring", "Star Wars: Episode V - The Empire Strikes Back", "Forrest Gump", "Inception", "The Lord of the Rings: The Two Towers", "One Flew Over the Cuckoo's Nest", "Goodfellas"],
                    callbacks: {
                        add: console.log,  // callback when adding a tag
                        remove: console.log   // callback when removing a tag
                    }
                });
        </script>

    <% include ../partials/footer %>

Оригинальный вопрос

Например, если я создаю веб-сайт отзывов о ресторанах и создаю страницу с формой, чтобы я мог добавлять новые рестораны на сайт, я хотел бы включить такие поля, как:

  1. Название ресторана
  2. Адрес
  3. Средняя цена за человека

В дополнение к этому, скажем, я хочу добавить поле, в котором каждая строка, разделенная точкой с запятой, может стать чем-то вроде тега. Примеры: «итальянский», «западный», «семейный». Как возможны способы, которыми я могу это реализовать? Кажется, стандартные формы HTML этого не позволяют, и мне нужно что-то импортировать - я не прав?

В настоящее время изучаю и экспериментирую со стеком MEN (MEAN менее Angular) Большое спасибо заранее.

...