¿El complemento de etiquetado de autocompletar jQuery como las etiquetas de entrada de StackOverflow? [cerrado]

523

¿Qué soluciones logran la misma finalización automática que SO usa para ingresar etiquetas?

Hay complementos que pueden manejar una palabra, pero no he visto ninguno que maneje varias palabras.

jquery autocomplete tags Joe Phillips
fuente
Votación para cerrar como herramienta rec.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
He creado lo mejor - github.com/yairEO/tagify
vsync
@vsync Lo agregó a la lista en la primera respuesta. Lamentablemente, no puedo vincular directamente a codepen.io debido a que no tengo ningún código en la respuesta
Joe Phillips
@JoePhilllips - tal vez acepte acortados de URL de Google
vsync
@JoePhilllips: mi complemento es mejor que el mejor en la parte superior de la lista, y merece estar en la parte superior y tengo buenos puntos de venta para eso. Actualmente, el primero en la lista está hinchado (x4 que el mío), usa un elemento de entrada adicional (malo para la serialización de formularios) y no admite comas ni pegar etiquetas con ellos. ofrece algunas características que son agradables pero innecesarias para la mayoría de los casos. autocompletedebería usarse desesperadamente en mi humilde opinión
vsync

Respuestas:

763

En orden de actividad, demos / ejemplos disponibles, y simplicidad:

Relacionado:

Dmitriy Nesteryuk
fuente
En IE9 está dando "Línea: 18 Error: El objeto no admite la propiedad o el método 'tagit'"
Raghav
2
Cualquier persona que busque la versión más actualizada, documentación y ejemplos más extensos de este increíble complemento debe ir aquí y desechar: github.com/aehlke/tag-it
Crisman
1
Actualización: creo que magicsuggest es la mejor opción ahora.
ssj
8
tag-it está sobrevalorado. Requerir jquery para un sistema de etiquetas simple es demasiado, pero también requiere jQuery UI y jquery UI CSS. No vale la pena.
Alvaro
1
@scniro Terminé usando jquery.tagsinput porque no me importa usar jQuery, que ya se está utilizando en mi proyecto. Pensé que era una locura pedir jquery UI y CSS.
Alvaro
62

Bootstrap: si está utilizando Bootstrap. Esta es realmente buena: Select2

Además, TokenInput es interesante. Primero, no depende de jQuery-UI, segundo, su configuración es muy fluida.

El único problema que tuve no es compatible con el etiquetado libre de forma nativa. Entonces, tengo que devolver la cadena de consulta al cliente como parte de la respuesta JSON.

Como @culithay mencionó en el comentario, TokenInput admite muchas características para personalizar. Y destaque de alguna característica que los demás no tienen:

  • tokenLimit: el número máximo de resultados que el usuario puede seleccionar. Use nulo para permitir selecciones ilimitadas
  • minChars: el número mínimo de caracteres que el usuario debe ingresar antes de realizar una búsqueda.
  • queryParam: el nombre del parámetro de consulta que espera que contenga el término de búsqueda en el lado del servidor

Gracias culithay por el aporte.

Nishant
fuente
3
Parece que TokenInput es exactamente lo que he estado buscando: el usuario escribe algunas cosas, realiza una búsqueda en el servidor, el usuario puede seleccionar un elemento buscado, enjuagar y repetir.
Mala
1
TokenInput admite muchas características para personalizar. Y destaco algunas características que los otros no tienen. - tokenLimit: el número máximo de resultados que el usuario puede seleccionar. Use nulo para permitir selecciones ilimitadas - minChars: el número mínimo de caracteres que el usuario debe ingresar antes de realizar una búsqueda. - queryParam: el nombre del parámetro de consulta que espera que contenga el término de búsqueda en el lado del servidor
culithay
1
@culithay agregado a la respuesta
Nishant
Cómo agregar nuevas etiquetas gratuitas: stackoverflow.com/questions/28656977/… Difícil :-(
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Bueno No admitir el etiquetado libre no es un gran problema, ya que se puede superar fácilmente.
RationalRabbit
9

Esto originalmente respondió una pregunta complementaria sobre la sabiduría de descargar jQuery versus acceder a él a través de un CDN, que ya no está presente ...

Para responder lo que pasa con Google. Me moví para acceder a JQuery y a la mayoría de estos tipos de bibliotecas a través de la CDN correspondiente en mis sitios.

A medida que más personas hacen esto, es más probable que se almacene en caché en las máquinas de los usuarios, por lo que mi voto es una buena idea.

En los cinco años desde que ofrecí esto por primera vez, se ha convertido en sabiduría común.

Julian
fuente
3
También implementamos esto como parte de nuestras plantillas predeterminadas. Google puede servir este código comprimido y fuera de un CDN más rápido que nosotros, además, si hay incluso un 2% de posibilidades de que un visitante tenga esto en caché, es mejor que ninguna posibilidad.
Tom
27
¿Cómo es esta la respuesta a la pregunta original?
Derek
3
La última parte 'También, ...' pregunta si vincular a la versión de Google es una buena o mala idea, y mi respuesta es que es una idea cada vez más buena.
Julian
@Derek No creo que tuviera otras respuestas aceptables cuando lo pregunté originalmente. Eso ha cambiado desde entonces.
Joe Phillips
1

Acabamos de abrir este complemento de jquery Github: tactivos / jquery-sew .

usuario1880508
fuente
1
Si bien este enlace puede responder la pregunta, es mejor incluir aquí las partes esenciales de la respuesta y proporcionar el enlace como referencia. Las respuestas de solo enlace pueden volverse inválidas (y rechazadas) si la página vinculada cambia. Vea Cómo responder por qué es importante.
bytebuster
3
La página de demostración está muerta.
Edward Olamisan