Jquery autocomplete pour la forme d'entrée, en utilisant la liste de catégories Textpattern comme source

Question

J'utilise le Textpattern CMS pour construire un site de discussion - J'ai une bonne compréhension de XHTML et CSS, ainsi que du langage de template de Textpattern, mais PHP et Javascript sont un peu au-delà de ma ruse.

Dans le formulaire de saisie pour commencer un nouveau sujet, les utilisateurs doivent sélectionner une catégorie dans une liste de plus de 5 000 options. L'utilisation de l'élément HTML select -type input est très lourde, mais cela fonctionne. Je voudrais utiliser une sorte de magie Javascript pour afficher un élément d'entrée text -type qui lira l'entrée de l'utilisateur et affichera les correspondances ou complétera automatiquement les catégories, en passant le value de l'option requise dans le champ de base de données approprié.

J'ai vu plusieurs plugins autocomplete pour jquery, mais les instructions supposent que vous comprenez comment fonctionne Javascript.

Comme je l'ai mentionné ci-dessus, il est facile pour moi de générer la liste de catégories en tant qu'élément select -type input, et je peux cacher cet élément en utilisant CSS. Est-il possible de contrôler l'entrée select-list en utilisant un mécanisme de saisie semi-automatique dans un élément d'entrée de type text? Comment ferais-je cela?

Answer 1

Vous pouvez configurer le autocomplete de prendre ses données à partir d'une URL, afin que je puisse voir ce utilisé dans quelques astucieuses façons avec Textpattern.

Le format de tableau qui autocomplete utilise ressemble à ceci:

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

Puisque vous avez 5000+ éléments, vous pouvez créer une page qui les énumère simplement en utilisant ce format:

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

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

pour utiliser cette page au lieu d'inclure tous les éléments dans un champ de sélection, vous devez créer votre saisie semi-automatique avec:

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

Vous pouvez utiliser un plugin de mise en cache pour accélérer le chargement.

Pour accélérer les choses encore plus, vous pouvez utiliser la fonction de recherche Textpattern avec un custom display page au lieu d'utiliser une liste complète. Il peut y avoir un moyen de configurer la saisie semi-automatique de sorte qu'à chaque fois qu'un nouveau caractère est entré/supprimé, la saisie semi-automatique est rechargée avec la nouvelle chaîne de recherche.

Answer 2

EDIT: Mise à jour pour mettre option.value dans un champ caché

Oui, il est possible. Par exemple, si vous avez le code html suivant:

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

Vous pouvez utiliser le code jquery suivant pour mettre ces données dans un tableau:

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

Et enfin, vous pouvez utiliser un plugin autocomplete comme this one :

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

Vérifiez la autocomplete plugin demo page pour voir ce que options vous pouvez utiliser (comme autoFill et mustMatch).

Tout ce que vous devez faire est de mettre dans votre tête html (js jquery, autocomplete css & js, le code de votre page):

<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, il n'y a que quelques lignes de code, mais je n'aime pas vraiment le truc "select to array". Si possible, vous devriez créer une page qui renvoie une liste de catégories correspondant à l'entrée de l'utilisateur (encore une fois, vérifiez la page de démonstration pour des exemples, malheureusement, je ne peux pas vous aider beaucoup avec Textpattern).

Bien sûr, je n'ai pas testé, il suffit de mettre un commentaire si vous avez une question. EDIT: Je ne test, mais pas avec des articles 5k dans mon select;)