Jquery Autocomplete für Eingabeformular, unter Verwendung der Textpattern-Kategorieliste als Quelle

Question

Ich verwende die Textpattern CMS, um eine Diskussionsseite zu erstellen-- Ich habe ein festes Verständnis von XHTML und CSS, sowie Textpattern Vorlage Sprache, aber PHP und Javascript sind ein bisschen jenseits meiner List.

Auf dem Eingabeformular, um ein neues Thema zu beginnen, müssen Benutzer eine Kategorie aus einer Liste von über 5.000 Optionen auswählen. Die Verwendung des HTML select-Typs input Element ist sehr unhandlich, aber es funktioniert. Ich würde gerne eine Art von Javascript Magie zu Anzeige ein text-Typ Eingabeelement, die Benutzereingabe und Anzeige entspricht oder Autovervollständigung aus den verfügbaren Kategorien, passierte die erforderliche Option value in das entsprechende Datenbankfeld lesen.

Ich habe mehrere Autocomplete-Plugins für jquery gesehen, aber die Anweisungen setzen voraus, dass Sie verstehen, wie Javascript funktioniert.

Wie ich oben erwähnt habe, ist es einfach für mich, die Kategorie Liste als select-Typ input-Element zu generieren, und ich kann dieses Element mit CSS ausblenden. Ist es möglich, die Select-List-Eingabe mithilfe eines Autocomplete-Mechanismus in einem Eingabeelement des Typs text zu steuern? 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, damit ich sehen kann dies mit Textpattern in ein paar raffinierte Weise verwendet werden.

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

["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 ein Auswahlfeld aufzunehmen, richten Sie Ihre automatische Vervollständigung ein mit:

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

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

Um die Dinge noch mehr zu beschleunigen, könnten Sie die Textpattern-Suchfunktion mit einem custom display page anstelle einer vollständigen Auflistung verwenden. Es gibt möglicherweise eine Möglichkeit, die automatische Vervollständigung einzurichten, sodass bei jedem neuen Zeichen die Autovervollständigung mit der neuen Suchzeichenfolge neu geladen wird.

Answer 2

EDIT: Aktualisiert in einem versteckten Feld stellen option.value

Ja, ist es möglich. Wenn Sie den folgenden HTML-Code zum Beispiel 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> 

können Sie folgenden 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 wie this one verwenden :

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

überprüfen Sie die autocomplete plugin demo page sehen, was options Sie (wie Autofill und mustMatch) verwenden können.

Alles, was Sie tun müssen, ist in Ihrem HTML-Header setzen diese (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 mag das "select to array" Zeug nicht wirklich. Wenn möglich, sollten Sie eine Seite erstellen, die eine Liste von Kategorien zurückgibt, die den Benutzereingaben entsprechen (schauen Sie erneut auf der Demo-Seite nach, leider kann ich Ihnen mit Textpattern nicht viel helfen).

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