Come creare una barra di ricerca personalizzata?

Sto cercando di creare una barra di ricerca personalizzata simile al plugin discourse-search-banner. Non voglio utilizzare quel plugin perché interferisce con l’aspetto del mio tema.

Come posso replicare quella funzionalità su un elemento <input type="text" /> a mia scelta?

Ho esaminato il codice sorgente del plugin e ho provato ad adattarlo per utilizzare solo il mio elemento HTML, ma non sono riuscito a capire come fare. Apprezzerei qualsiasi consiglio!

2 Mi Piace

Potresti linkare qui quel plugin? Non riesco a trovarlo. Forse potresti anche taggare il creatore del plugin; potrebbe avere qualche idea.

2 Mi Piace

Stai parlando di questo #theme-component?

2 Mi Piace

Esatto! Scusa, mia colpa per non aver inserito il link, farò una modifica.

1 Mi Piace

Nessun problema, ma quello è un componente del tema e non un plugin, quindi cambia alcune cose. Soprattutto perché i componenti del tema funzionano con la logica lato client e i plugin con la logica lato server. O stai cercando di creare un plugin basato su quel componente del tema?

2 Mi Piace

Scusa per la risposta in ritardo.

Non mi importa molto se alla fine sarà un plugin o un componente del tema, purché ottenga la funzionalità desiderata. Fondamentalmente, ho bisogno di replicare il comportamento della ricerca predefinita (icona nella barra in alto) su un campo di testo a mia scelta.

Come posso procedere?

Molti problemi possono essere risolti con il CSS.

Cosa ti impedisce di ispezionare e modificare semplicemente il CSS? Sarebbe di gran lunga la soluzione più rapida.

Nel caso peggiore, fai un fork di TC e modifica il tuo CSS?

1 Mi Piace

Non è tanto una questione di CSS, quanto della collocazione e di come si integra nella mia struttura HTML. Se riesco a capire come modificare il punto in cui il componente viene iniettato, potrei trovare una soluzione. Puoi indicarmi una direzione da seguire?

Con il componente tema abilitato sul tuo sito, ispeziona il codice con il tuo browser e vedi dove viene posizionato. Modificalo nel browser per trovare una posizione più comoda e utilizza quella per aggiornare/modified un fork del TC. Dovrebbe funzionare.

C’è anche una soluzione pronta all’uso per l’intestazione:

Se nessuna delle due opzioni fa al caso tuo e le modifiche CSS non sono sufficienti, dovrai sporcarti le mani con il codice dei widget :).

1 Mi Piace

Un post è stato diviso in un nuovo argomento: Dove trovare la barra di ricerca nelle nostre impostazioni?