Мой стиль, давайте сначала представим визуализации. Если вы чувствуете, что это довольно хорошо, пожалуйста, обратитесь к коду реализации.
Давайте не будем говорить по глупости и сначала посмотреть на иерархию DIV
<!-Внешний Div может быть указан в любое время для определения ширины дочернего элемента-> <div> <!-метка формы Добавить текстовые подсказки-> <label for = ""> Полный текстовый поиск </label> <!-Несколько вариантов для хозяина Div динамически добавляют SPAN в будущем-> <Div> <!-Форма используется для привязки слушательных событий и получает входные данные пользователей. name = "int-search" value = "" Placeholder = "Выберите ключевые слова или нажмите вкладку или введите или введите для разделения ключевых слов"> </div> <!-Включите столбцы раскрывающегося списка-> <div> <!-Динамически добавить LI в соответствии с пакетами данных JSON-> <ul> </ul> </div>
Аннотация структуры DOM можно ясно объяснить, давайте посмотрим на CSS
* {Box-Size: Border-box;}.. int-input-span-container {ширина: 100%; фоновый цвет: #ffff; граница: 1px solid #ccc; Box-Shadow: вставка 0 1px 1px rgba (0, 0, 0, 0,075); отображение: встроенный блок; Padding: 2px 4px; #555; Средний; граница-радиус: 1px; максимальная ширина: 100%; линейная-высота: 30px;}. int-input-span-container .tag {padding: -2px; font-size: 12px; font-family: serif ;; right right: 2px; margin-top: 2px; margin-bott: 2px; {Font-Size: 10px; Padding: 4px 6px; граница: нет; текстовая тень: нет; граница-радиус: 3px; font-weeight: 200;}. label-primary { # #2693ff; color: white;}. int-in-inpant-span-container spane i [data-rele = 'remove'] {cursor: input-span-contatainer spane rale = 'remove'] {cursor: atpan-span; 2px; color: white;}. Tag [data-role = "remove"] {margin-left: 2px; cursor: pointer;} input [name = 'int-search'] {граница: нет; Absolute; ширина: 100px; max-height: 120px; фоновый цвет: #ffff; overflow: auto; display: none; z-index: 9999;}. Hint-ul {text-decoration: none; list-style-type: не; 4px;}. Hint-ul li: Hover {foangy-color: #eee;}Важно определить размер границы: граница в CSS. Это свойство может сделать прокладку и границу в ширине
.hint-input-span-container Также важно установить дисплей в inline-block, есть список тегов
.hint-block устанавливает z-index на 9999, чтобы обеспечить отображение на передней части, а положение абсолютно для обеспечения его позиции
Все остальные могут быть скорректированы в соответствии с вашими потребностями
Посмотрим код JS ниже
$ (function () {// JSON Data Packet VAR DATA = {DATA: [«123», «Привет, Пекин», «Пекин приветствуется», «Пекин добрый», «Океан», «Бюро океана Гуанли», «Я океан», «Я был удивлен», «Я Лалала», «Я не могу нести его», «Япония», «Рассма Гора $ (". ntic-ul"); // Добавить словарь AddDictionary (data.data, addullistener); // Установить список словарей SethintSearchContainerWidth (); // реализовать адаптивное прослушивание события $ (window) .bind ('resize', sethintsearchcontainerwidth); Focus $ hintsearch.focus (function () {antiveNown ();}); // Потерянный фокус // Установить задержку для прослушивания ответа на клик $ hintsearch.blur (function () {settimeout (function () {animateup ();}, 200);}); // вкладка «Основное событие». Предотвращено пузырьковым и переключающим фокусом $ hintsearch.keydown (function (e) {switch (e.which) {case 9: case 13: {var text = $ hintsearch.val (); if (! $. trim (text)) {$ hintsearch.val ("); e.preventdefault (); {$ hintsearch.fore ('<pan>' + text + '<i data-role = "удалить"> </i> <i> </i> </i> </span> '); addspanlistenr ();} // console.log ($ hintsearch.val ()); $ hintsearch.val (""); $ hintsearch.focus (); e.preventefault ();/detectection); Соединение // Сопоставление входного содержимого в LI Если строка включена, его можно найти и возвращать // Метод поиска может быть изменен сама по себе. data.data.filter (function (x) {return x.indexof (text)! = -1;}) if (tmparr.length === 0) {tmparr.push ("no Соответствующая запись");} i = 0; AnimatedOwn () {$ hintblock.slydown ('fast'). RGBA (34,36,38, .15) '}); $ hintsearchContainer.css ({' border ':' 1px solid #96c8da ',' border-bottom ':' 0px ',' box-shadow ':' 0 2px 3px 0 rgba (34,36,38,. animateUp () {$ hintblock.slideup ('fast', function () {$ hintsearchContainer.css ({'border': '1px solid #ccc'});});});} // Проверьте, повторяется ли он с помощью входной функции-containerhas (text) {var flag = 0; SPAN "). Каждый (function () {if ($ .trim (text) == $ .trim ($ (this) .text ())) {flag = 1; return;}}); вернуть флаг? false;} // установить функцию ширины ширины SethintSearchContainerWidth () () {var hint_width = hintSearchContainer.widThIdth () + 2 * parseint ($ hintsearchcontainer.css ('border-left'). Match (/[0-9]+/) [0]); $ hintblock.css ({'width': hint_width});} // funct function addullistener () {$ hintul.delegate ('li', 'rack () {var {var {var {var () {var () {var () {) {var () {ar-ntuce () {var () {) {) {) {) $ (this) .text (); if (! checkContainerHas (text)) {$ hintsearch.before ('<pan>' + text + '<i data-role = "удалить"> </i> <i> </i> </i> </span>'); addspanlistenr ();} $ hintsearch.val ("); addspanlistenr () {$ (".. ntput-inpat-span-container span"). delegate ("i", 'click', function () {$ (this) .parent (). remove ();})}})Основное внимание уделяется прослушиванию событий и эксплуатации элементов DOM, что зависит от jQuery.
Выше приведено метод реализации ввода с несколькими выборами компонента пользовательского интерфейса, введенного вам редактором (с функцией поиска). Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!