Completamento automatico di Jquery per il modulo di input, utilizzando l'elenco delle categorie di Textpattern come sorgente

Question

Sto usando il CMS Textpattern per costruire un sito di discussione-- Ho una solida conoscenza di XHTML e CSS, così come il linguaggio di template di Textpattern, ma PHP e Javascript sono un po 'oltre la mia astuzia.

Nel modulo di input per iniziare un nuovo argomento, gli utenti devono selezionare una categoria da un elenco di oltre 5.000 opzioni. L'uso dell'elemento HTML select -type input è molto ingombrante, ma funziona. Vorrei utilizzare un qualche tipo di magia Javascript per visualizzare un elemento di input di tipo testo che leggerà l'input dell'utente e visualizzerà corrispondenze o completerà automaticamente dalle categorie disponibili , passando il valore dell'opzione richiesta nel campo del database appropriato.

Ho visto diversi plugin di completamento automatico per jquery, ma le istruzioni presuppongono che tu capisca come funziona Javascript.

Come ho detto sopra, è facile per me generare l'elenco delle categorie come elemento select -type input , e posso nascondere quell'elemento usando CSS. È possibile controllare l'input dell'elenco di selezione utilizzando un meccanismo di completamento automatico in un elemento di input di tipo text ? Come lo farei?

Answer 1

Puoi impostare il completamento automatico in modo che prenda i suoi dati da un URL, quindi posso vederlo usato in un paio di modi eleganti con Textpattern.

Il formato dell'array che utilizza il completamento automatico è simile al seguente:

["example_one", "example_two", ... ]

Dato che hai 5000+ elementi, potresti voler creare una pagina che li elenchi semplicemente usando quel formato:

Page Autocomplete:
[
    <txp:article_custom form="array_form" ... />
]

Form array_form:
"<txp:title />",

Per utilizzare questa pagina invece di includere tutti gli elementi in un campo selezionato, devi impostare il completamento automatico con:

$("#example").autocomplete("<txp:link_to_home />Autocomplete");

È possibile utilizzare un plug-in di cache per accelerare il caricamento.

Per velocizzare ulteriormente le cose, potresti utilizzare la funzione di ricerca Textpattern con una pagina di visualizzazione personalizzata invece di utilizzare un elenco completo. Potrebbe esserci un modo per impostare il completamento automatico in modo che ogni volta che un nuovo carattere viene inserito / rimosso, il completamento automatico viene ricaricato con la nuova stringa di ricerca.

Answer 2

MODIFICA: aggiornato per inserire option.value in un campo nascosto

Sì, è possibile. Ad esempio, se hai il seguente codice html:

<input type="text" id="myTextBoxId"></input>
<!-- added hidden field to store selection option value -->
<input type="hidden" id="myHiddenField" name="selectedCategory"></input>
<select id="mySelectId" style="display: none">
    <option>Category 1</option>
    <option>Category 2</option>
    <option>...</option>
</select>

Puoi usare il seguente codice jquery per mettere questi dati in un array:

var categories = $.map($("#mySelectId option"), function(e, i)
{
    return e; // Updated, return the full option instead its text
});

E infine, puoi usare un plugin di completamento automatico come questo :

$("#myTextBoxId").autocomplete(categories,
{
    formatItem : function(item) { return item.text; } // Added
});

Controlla la pagina demo del plug-in di completamento automatico per vedere cosa opzioni che puoi usare (come autoFill e mustMatch).

Tutto quello che devi fare è inserirlo nell'intestazione html (jquery js, completamento automatico css & amp; js, codice per la tua pagina):

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js">
</script>
<script type="text/javascript">
    $(function()
    {
        // Updated script
        var categories = $.map($("#mySelectId option"),
            function(e, i) { return e; });
        $("#myTextBoxId").autocomplete(categories,
        {
            formatItem : function(item) { return item.text; }
        });
        // Added to fill hidden field with option value
        $("#myTextBoxId").result(function(event, item, formatted)
        {
            $("#myHiddenField").val(item.value);
        }
    });
</script>

Ok, sono solo poche righe di codice, ma non mi piace molto la selezione di " nell'array " cose. Se possibile, dovresti creare una pagina che restituisca un elenco di categorie corrispondenti all'input dell'utente (di nuovo, controlla la pagina demo per esempi, sfortunatamente, non posso aiutarti molto con Textpattern).

Naturalmente, non ho testato, basta inserire un commento se hai una domanda. EDIT: ho fatto il test DID, ma non con 5k elementi nel mio select ;)