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

Vous pouvez configurer l'autocomplète pour prendre ses données à partir d'une URL, de sorte que je peux voir que cela est utilisé de deux façons avec Textpattern.

Le format de matrice que l'utilisation automatique comporte comme ceci:

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

Étant donné que vous avez plus de 5000 éléments, vous voudrez peut-être 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 configurer votre autocomplète 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 encore plus, vous pouvez utiliser la fonction de recherche Textpattern avec une page d'affichage personnalisée au lieu d'utiliser une liste complète. Il peut y avoir un moyen de configurer l'Autocomplé pour que chaque fois qu'un nouveau caractère soit entré / supprimé, l'autocomplète est rechargée avec la nouvelle chaîne de recherche.

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

Oui c'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 autocomplé comme celui-ci :

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

Vérifiez la page de démonstration du plugin autocomplé pour voir quelles options vous pouvez utiliser (comme autofill et mustMatch).

Tout ce que vous devez faire est de le mettre dans votre en-tête html (jquery js, autocomplete css & js, code pour 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> 

D'accord, ce ne sont que quelques lignes de code, mais je n'aime pas vraiment les choses «choisies pour le tableau». Si possible, vous devez 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: J'ai testé, mais pas avec 5k éléments dans ma select 😉