Mi estilo, primero presentemos las representaciones. Si cree que es bastante bueno, consulte el código de implementación.
No hablemos de tonterías y miremos primero la jerarquía Div
< name = "tint-search" value = "" placeHolder = "Seleccione palabras clave o presione la pestaña o ingrese para dividir las palabras clave"> </div> <!-Incluya columnas de lista desplegable-> <div> <!-Agregue dinámicamente Li según los paquetes de datos JSON-> <ul> </ul> </div>
La anotación de la estructura DOM se puede explicar claramente, echemos un vistazo a CSS
* {box-singing: border-box;}. INTRIENTO-INPUT-SPAN-Container {Width: 100%; Background-Color: #ffff; Border: 1px Solid #CCC; Box-shadow: INSET 0 1PX 1PX RGBA (0, 0, 0, 0.075); Display: Inline-Block; Padding: 2PX 4PX; Color; #555; VERTICA: VERTICA: VERTICA: VERTICA: VERTICA: VERTICA: VERTICA: ALEMB Middle; border-radio: 1px; width máximo: 100%; line-height: 30px;}. INSINT-Input-span-contener .tag {relleno: -2px; font-size: 12px; font-family: serif ;; margin-right: 2px; margin-top: 2px; margin-bottom: 2px: inline-block;}.}. {font-size: 10px; padding: 4px 6px; border: none; text-shadow: none; border-radius: 3px; font-weight: 200;}. etiqueta-primary {background: #2693ff; color: white;}. INTERNO-INPUT-SPAN-Conseiner ENPA I [Data-Role = 'Eliminar'] {Cursor: Pointer;}. 2px; color: blanco;}. Etiqueta [data-role = "eliminar"] {margen-left: 2px; cursor: pointer;} input [name = 'tint-search'] {border: none; box-shadow: none; esquine: none; de fondo: transparente; remar: 0; margen: 0; width: 100%; mAx-width: inhherit;}.}. absoluto; ancho: 100px; max-height: 120px; en segundo plano: #ffff; desbordamiento: auto; visual 4px;}. Sugerencia-ul Li: Hover {Background-Color: #EEE;}Es importante establecer el dimensionamiento del borde: caja de borde en CSS. Esta propiedad puede hacer que el acolchado y la frontera calculen en ancho
.Hint-Input-span-continer También es importante establecer la pantalla en línea en línea, hay una lista de etiquetas
. Hint-Block establece el índice Z al 9999 para garantizar la visualización en el extremo frontal, y la posición es absoluta para garantizar su posición
Todos los demás se pueden ajustar de acuerdo con sus necesidades
Veamos el código JS a continuación
$(function(){//json data packet var data = {data:["123","Hello Beijing","Beijing Welcome","Beijing Good","Ocean","Ocean Guangli Bureau","I Ocean","I was surprised","I lalala","I can't bear it","Institution","Japan","Russia Mountain "," Etiopia "," Ibaka "," bibi "]}; // Obtenga el objeto DOM que debe llamarse varias veces más tarde var $intsearch = $ (" input [name = 'hint-search'] "); var $ hintsearchcontainer = $ (" .intint-span-contener "); var $ hintblock = $ (". Hintseartainer ". $ (". tintin-ul"); // Agregar Dictionary AddDictionary (data.data, Addullistener); // Establecer el ancho de la lista de diccionario SethIntSearchContainerWidth (); // Implementar escucha receptiva para cambiar el tamaño $ (Window) .Bind ('Redize', SethintSearchContainerWidth); // Obtener al cambio de tamaño $ (Window). focus $ hintsearch.focus (function () {animtown ();}); // perdió foco // Establecer retraso para escuchar a hacer clic en respuesta $ hintsearch.blur (function () {setTimeOut (function () {animateUp ();}, 200);}); // tab e enter // habla las dos claves de la tabla y enter si hay contenido de entrada en la entrada, agrega la entrada de la entrada. impedido de burbujear y conmutar enfoque $ hintsearch.keydown (function (e) {switch (E.which) {Case 9: Case 13: {var text = $ hintsearch.val (); if (! $. Trim (text)) {$ hintsearch.val (""); e.preventDefault (); return;} if (! checkContainerHas (text))) {$ hintsearch.before ('<span>' + text + '<i data-role = "remove"> </i> <i> </i> </i> </span> '); addspanListenr ();} // console.log ($ hintsearch.val ()); $ hintsearch.val ("" "); $ hintsearch.focus (); e.preventDefault (); break;} default:;}} Emparejamiento // Haga coincidir el contenido de entrada en LI Si se incluye la cadena, se puede encontrar y devolver // el método de búsqueda se puede modificar por sí mismo. data.data.filter (function (x) {return x.indexof (text)! = -1;}) if (tmParr.length === 0) {tmParr.push ("no coincidir la entrada");} UpdateDictionary (tmParr, Addullistener);}) // Function Library // Agregar una biblioteca de Diccionary de los usuarios ADDICEARIARIARIARIARía (data) (data) {para Callback) {para Callback, {para acumular (agrega una biblioteca de Dicción Común para la función de los usuarios (Data ADDDICEARY (DATA) (Callback) {para Callback). = 0; animtown () {$ hintblock.slididown ('fast'). css ({'border': '1px sólido #96c8da', 'border-top': '0px', 'box-shadow': '0 2px 3px 0 RGBA (34,36,38, .15) '}); $ hintsearchContainer.css ({' border ':' 1px sólido #96c8da ',' border-bottom ':' 0px ',' box-shadow ':' 0 2px 3px 0 rgba (34,36,36, .15) '});} animateUp () {$ hintBlock.slideUp ('Fast', function () {$ hintseAchContainer.css ({{{'border': '1px sólido #cccccc'} '});});});}/} // verifique si se repite con la función de entrada de entrada checkContainerhas (text) {var flager = 0; $ ($ ("." Hintin-in-inputut-coNtenterinereinerinereinereinerinereinerinerinereinereinereinereinereinereinereiner-spaner-spentiner-spentinereiner-CONTUNER-CONTUNER-CONTUNER SPATINER SPATINER SPATINER SPATINER SPATINER SPATINER SPATINER SPATINER span "). Cada (function () {if ($ .trim (text) == $ .trim ($ (this) .Text ())) {flag = 1; return;}}); return flag? Verdadero: False;} // Establezca la función de ancho de inspector de inscripción de inscripción sethIntSearchContainerWidth () {var hint_width = $ hintsearchContainer.width () + 2 * parseInt ($ hintsearchcontainer.css ('padding-left'). parseInt ($ hintsearchContainer.css ('border-left'). Match (/[0-9]+/) [0]); $ hintblock.css ({'width': hint_width});} // byk en el evento Función de eventos addullistener () {$ hintul.delegate ('li', 'click', function () {{Var text = { $ (this) .Text (); if (! checkContainerHas (text)) {$ hintsearch.bebore ('<span>' + text + '<i data-role = "remo function addspanListenr () {$ (".El foco está en escuchar eventos y elementos DOM operativos, que depende de jQuery.
Lo anterior es el método de implementación desplegable de la selección múltiple de entrada del componente de la interfaz de usuario introducido por el editor (con la función de búsqueda). Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!