jQuery atWho in HTML для ввода текста в стиле @mention - PullRequest
Новая
       1

jQuery atWho in HTML для ввода текста в стиле @mention

0 голосов
/ 27 февраля 2020

Я хочу использовать возможность @mention при вводе текста в поле формы. Я нашел точный код для этого с этого сайта jFiddle , и это удивительно, когда вы делаете это там.

Однако, когда я пытаюсь создать страницу HTML, которая включает в себя HTML и JavaScript вместе, это не работает, см. Ниже. Во-первых, мне пришлось go и найти полную ссылку для jquery -3.2.1, потому что она не может быть найдена и допущена ошибка в консоли. Теперь это не ошибка, но также не работает.

Там, где написано " любой мой любимый город - ", вы можете ввести @, а затем должны отобразиться параметры London, Stuttgart и Köln. который запускается скриптом. 

<html>
<head>
   <div id="inputcity" contenteditable="true">and my favourite city is </div>



<script src="https://code.jquery.com/jquery-3.2.1.min.js">

// Initialize city field within content editable

  $('#inputcity').atwho({
     at: "@",
     data:['London', 'Stuttgart', 'Köln']
  });
</script>

</head>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Ваш код содержал пару синтаксических ошибок (в основном это закрытые теги). Я вычистил это и сделал это вместе: 

<html>
<body>
  <div id="inputcity" contenteditable="true">and my favourite city is </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ichord/At.js@master/dist/css/jquery.atwho.min.css">
  <script src="https://cdn.jsdelivr.net/gh/ichord/At.js@master/dist/js/jquery.atwho.min.js"></script>
  <script>
    // Initialize city field within content editable
    $('#inputcity').atwho({
      at: "@",
      data: ['London', 'Stuttgart', 'Köln']
    });
  </script>
</body>
</html>

Два предостережения: At. * ​​1015 * не поддерживается , и я полагался на версию в ветви master, для которой я сделал удобство. В производственной среде вы будете использовать что-то, что поддерживается (автор рекомендует ZURB Tribute ), и использовать правильный менеджер пакетов.

1 голос
/ 27 февраля 2020

Вам необходимо добавить следующие скрипты в ваш код: 

<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />

<!-- jquery.js -->
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>

Вот рабочий пример. 

<div id="inputcity" contenteditable="true">and my favourite city is </div>

<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>

<script>
  // Initialize city field within content editable
  $('#inputcity').atwho({
    at: "@",
    data: ['London', 'Stuttgart', 'Köln']
  });
</script>

Поскольку используемый вами пакет (At. * ​​1015 *) больше не поддерживается, вы можете использовать пакет tribute .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...