Cómo crear un sistema de etiquetado como en Stack Overflow o Quora

Question

Quiero crear un sistema de etiquetado como se ve aquí en Stack Overflow o en Quora. Será su propio modelo, y estoy planeando usar this autocomplete plugin para ayudar a los usuarios a encontrar las etiquetas. Tengo un par de preguntas:

1. Quiero que las etiquetas sean generadas por el usuario. Si un usuario ingresa una nueva etiqueta tipeándola y presionando un botón "Agregar", esa etiqueta se agrega a la base de datos, pero si un usuario ingresa una etiqueta existente, entonces usa esa. Estoy pensando en usar un código como este:

   def create 
   
   @video.tags = find_or_create_by_name(@video.tags.name) 
   
   end 
   

   ¿Estoy en el camino correcto?

2. Me gustaría implementar algo así como en Stack Overflow o Quora de modo que cuando haga clic en una etiqueta de la lista sugerida o haga clic en el botón "Agregar", esa etiqueta se agregue justo encima del campo de texto con ajax. ¿Cómo voy a implementar algo así?

Sé que esto es una especie de pregunta abierta. Realmente no estoy buscando el código exacto tanto como un empujón general en la dirección correcta. Por supuesto, los ejemplos de código no dolería :)

Nota No estoy pidiendo ayuda sobre cómo configurar el complemento de autocompletado de jQuery ... Sé cómo hacerlo. Por el contrario, parece que tendré que modificar el código en el complemento para que, en lugar de agregar las etiquetas dentro del campo de texto, se agreguen sobre el campo de texto. Apreciaría cualquier dirección con esto.

Answer 1

mbleigh's acts_as_taggable_on gem es una solución completa que definitivamente debe examinar un poco más de cerca. La implementación es sólida como una roca y flexible de usar. Sin embargo, se trata principalmente de adjuntar etiquetas a objetos, recuperar etiquetas en objetos y buscar elementos etiquetados. Esto es todo lo del servidor back-end.

La mayor parte de la funcionalidad que está buscando cambiar (en función de sus comentarios) en realidad está más relacionada con la implementación de su interfaz de usuario frontal, y la gema realmente no hace mucho por usted allí. Tomaré tus solicitudes una a una.

1. Si usuario introduce una nueva etiqueta, dicha etiqueta se agrega, si el usuario introduce una etiqueta existente , la etiqueta existente obtiene utilizado. acts_as_taggable_on hace esto.
2. Haz clic en una etiqueta de la lista sugerida al agrega esa etiqueta. Este es un problema de implementación - en el back-end deberá recopilar la lista sugerida de etiquetas , luego mostrar en su presentación como enlaces a su función de procesamiento.
3. Autocompletar cuando el usuario ingresa tag potencial. Utilizará el complemento de autocompletar jQuery en una lista de elementos extraídos de la tabla de etiquetas. Con jQuery adicional, puede capturar cuando hayan seleccionado una de las opciones de , o completar ingresando su nueva etiqueta, y luego llamar a la función de procesamiento .
4. Restringir usuarios para ingresar solo una etiqueta . Esta será su implementación de UI ; una vez que hayan ingresado o seleccionado una etiqueta , usted la procesará.Si ingresan dos palabras separadas por una coma, entonces antes o durante el procesamiento, tiene que tratarlo como una sola etiqueta, o tomar solo el texto hasta la primera coma y descartar el resto.
5. Cuando procesa la adición de una etiqueta , tendrá que hacer dos cosas. Primero, deberá controlar los cambios en la pantalla de la IU para reflejar que se ha ingresado/elegido una etiqueta . Este incluye la colocación de la etiqueta en la zona "seleted", sacándolo de la pantalla "disponible" , actualizar cualquier contadores, etc. En segundo lugar, tendrá que para enviar una petición al servidor para añadir el hecho etiqueta al objeto y persiste ese hecho en la base de datos (donde la gema etiquetable se hará cargo de ti). Puede hacerlo a través del una solicitud individual de AJAX por etiqueta, o puede manejarlo cuando envíe el formulario. Si es el último, necesitará var para mantener la lista de etiquetas que se han agregado/eliminado y necesitará código para manejar agregando/quitando valores a esa var.

Para ver un ejemplo de cómo guardar las etiquetas mientras se edita pero no se envía al servidor/base de datos hasta que se guarde un formulario, puede echar un vistazo a la funcionalidad de etiquetado en la nueva página de publicación de Tumblr. Puede agregar/eliminar etiquetas a voluntad mientras crea la publicación, pero ninguna de ellas va a la base de datos hasta que haga clic en guardar.

Como puede ver, la mayor parte de esto depende de usted para determinar y codificar, pero tiene muy poco que ver con la parte de back-end. La gema se encargará de eso bastante bien.

Espero que esto lo ayude a moverse en la dirección correcta.

Answer 2

Cuanto más trato de force la joya acts-as-taggable-on para trabajar más Creo que estos son fundamentalmente diferentes tipos de problemas. Específicamente debido a los alias. La gema considera que cada etiqueta es su propio copo de nieve especial, lo que dificulta la creación de sinónimos. En algunos casos, no es suficiente, si desea que la etiqueta tenga una descripción, deberá editar las migraciones especificadas (lo cual no es difícil).

Esto es lo que estoy considerando implementar, given the trouble I've had implementing via the gem. Supongamos que desea crear un sistema de etiquetado para Tecnologías.

Considere el siguiente código de psuedo, todavía no lo he probado.

rails g model Tech usage_count::integer description:text icon_url:string etc. Ejecute la migración. Tenga en cuenta que

Ahora en el controlador necesitará incrementar usage_count cada vez que sucede algo, el usuario envía una nueva pregunta etiquetada con el texto dado.

rails g model Name::Tech belongs_to:Tech name:string

Name::Tech model 
    belongs_to :tech 
end 

A continuación, puede buscar a través de algo como: punto de

search = Name::Tech.where("name LIKE :prefix", prefix: "word_start%") 
.joins(:tech) 
.order(usage_count: desc) 
.limit(5) 

esto está empezando. Es fundamentalmente diferente de la gema, ya que cada etiqueta es solo una cadena en sí misma, pero hace referencia a una tabla de datos más rica en la parte posterior.Trabajaré en la implementación y volveré a actualizar con una mejor solución.