JQuery die automatische Vervollständigung für Eingabeformular, mit Textpattern Kategorieliste als Quelle

Question

Ich bin mit dem Textpattern CMS einer Diskussion zu bauen site-- ich einen festen Griff von XHTML habe und CSS, sowie Textpattern der Template-Sprache, aber PHP und Javascript sind ein bisschen über meine List.

Auf dem Eingabeformular ein neues Thema zu beginnen, müssen die Benutzer von über 5.000 Optionen, um eine Kategorie aus einer Liste auszuwählen. das HTML-select-Typ input Element zu verwenden ist sehr unhandlich, aber es funktioniert. Ich möchte eine Art von Javascript Magie verwenden, um Anzeigen eines text-Typ Eingangselement , die Benutzereingaben lesen und Anzeige Streichhölzern oder die automatischen Vervollständigung von den verfügbaren Kategorien , vorbei die erforderlichen Wahl des value in das entsprechende Datenbankfeld.

Ich habe mehrere die automatische Vervollständigung Plugins für jquery gesehen, aber die Anweisungen setzen voraus, dass Sie verstehen, wie Javascript funktioniert.

Wie ich bereits erwähnt, ist es einfach für mich die Kategorieliste als select-Typ input Element zu erzeugen, und ich kann das Element mit CSS verstecken. Ist es möglich, Auswahlliste Eingang mit einem zum automatischen Vervollständigung Mechanismus in einem text-Typ Eingangselement zu kontrollieren? Wie würde ich das tun?

Answer 1

Sie können die zur automatischen Vervollständigung einrichten, um seine Daten von einer URL zu nehmen, so kann ich sehen, dies in ein paar raffinierte Weise mit Textpattern verwendet wird.

Das Array-Format, dass die automatische Vervollständigung sieht wie folgt verwendet:

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

Da Sie 5000+ Elemente haben, können Sie eine Seite erstellen, listet sie lediglich, dass Format:

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

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

Um diese Seite zu verwenden, anstatt alle Elemente in einem ausgewählten Bereich einschließlich, dann würden Sie Ihre Autocomplete mit ein:

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

Sie können ein Caching-Plugin verwenden Laden zu beschleunigen.

Dinge noch mehr zu beschleunigen, können Sie die Textpattern Suchfunktion verwenden, um mit einer individuellen Display-Seite anstelle einer vollständigen Liste verwenden. Es kann ein Weg sein, die automatische Vervollständigung einzurichten, so dass, wenn ein neues Zeichen eingegeben / entfernt, die automatische Vervollständigung wird mit dem neuen Suchtext neu geladen.

Answer 2

EDIT: Aktualisiert option.value in einem versteckten Bereich setzen

Ja, es ist möglich. Zum Beispiel, wenn Sie den folgenden HTML-Code haben:

<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>

Sie können folgende jQuery-Code verwenden diese Daten in einem Array zu setzen:

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

Und schließlich können Sie eine Autocomplete-Plugin verwenden, wie diese :

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

Überprüfen Sie die zur automatischen Vervollständigung Plugin Demo-Seite zu sehen, was Optionen (wie Autofill und mustMatch) verwenden können.

Alles, was Sie tun müssen, ist dies in Ihren HTML-Header (jquery js, die automatische Vervollständigung CSS & js, Code für Ihre Seite):

<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, es ist nur ein paar Zeilen Code, aber ich weiß nicht wirklich wie die „auswählen, um Array“ stuff. Wenn möglich, sollten Sie eine Seite erstellen, die eine Liste der Kategorien gibt passende Benutzereingabe (wieder, überprüfen Sie die Demo-Seite für Beispiele, leider, ich nicht, dass Sie viel mit Textpattern helfen kann).

Natürlich habe ich nicht testen, setzen Sie einfach einen Kommentar, wenn Sie eine Frage haben. EDIT: Ich habe Test, aber nicht mit 5k Artikel in meinem select;)