¿Cómo hacer una barra de búsqueda personalizada?

He estado intentando crear una barra de búsqueda personalizada similar al plugin discourse-search-banner. No quiero usar ese plugin ya que interfiere con la apariencia de mi tema.

¿Cómo puedo replicar esa funcionalidad en un <input type="text" /> de mi elección?

Estuve revisando el código fuente del plugin e intenté adaptarlo para usar solo mi elemento HTML, pero no pude resolverlo. ¡Agradecería cualquier consejo!

2 Me gusta

¿Te importaría enlazar ese plugin aquí? No logro encontrarlo. Quizás también podrías etiquetar al creador del plugin; tal vez tenga algunas ideas.

2 Me gusta

¿Te refieres a este #theme-component?

2 Me gusta

¡Exacto! Lo siento, fue mi culpa por no enlazarlo. Haré una edición.

1 me gusta

No te preocupes, pero eso es un componente de tema y no un complemento, por lo que cambia algunas cosas. Especialmente porque los componentes de tema funcionan con lógica del lado del cliente y los complementos con lógica del lado del servidor. ¿O estás buscando crear un complemento basado en ese componente de tema?

2 Me gusta

Perdón por la respuesta tardía.

Realmente no me importa si termina siendo un plugin o un componente del tema, siempre que logre la funcionalidad deseada. Básicamente, lo que necesito es replicar el comportamiento de la búsqueda predeterminada (el icono en la barra superior) en un campo de texto de mi elección.

¿Cómo puedo hacerlo?

Muchos problemas pueden resolverse con CSS.

¿Qué te impide simplemente inspeccionar y modificar el CSS? Esa sería, con mucho, la solución más rápida.

En el peor de los casos, bifurca el TC y edita tu CSS.

1 me gusta

No es realmente el CSS, sino más bien la colocación y cómo encaja en mi estructura HTML. Si logro averiguar cómo modificar dónde se inyecta el componente, podría tener una solución. ¿Podrías indicarme por dónde empezar?

Con el componente de tema habilitado en tu sitio, inspecciona el código con tu navegador y observa dónde se coloca. Ajusta desde allí en tu navegador para encontrar una ubicación más cómoda y úsalo para actualizar/editar un fork del TC. Eso debería funcionar.

También hay una opción lista para usar para el encabezado:

Si ninguna te convence y las modificaciones de CSS no son suficientes, tendrás que ensuciarte las manos con el código de los widgets :).

1 me gusta

Se dividió una publicación en un nuevo tema: ¿Dónde encontrar la barra de búsqueda en nuestra configuración?