Jquery autocomplete pour le formulaire de saisie, en utilisant la liste de catégories Textpattern comme source

Question

J'utilise le système de gestion de texte Text pour créer un site de discussion-- Je maîtrise parfaitement le langage XHTML et CSS, ainsi que le langage de template de Textpattern, mais PHP et Javascript sont un peu au-delà de ma ruse.

Sur 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 HTML, l'élément select -type input est très difficile à manier, mais cela fonctionne. J'aimerais utiliser une sorte de magie Javascript pour afficher un élément d'entrée text qui lira les entrées utilisateur et les correspondances ou la saisie semi-automatique des catégories disponibles , en passant la valeur 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 compreniez le fonctionnement de Javascript.

Comme je l'ai mentionné ci-dessus, il m'est facile de générer la liste de catégories sous la forme d'un élément select -type input , et je peux masquer cet élément à l'aide de CSS. Est-il possible de contrôler l'entrée de la liste de sélection à l'aide d'un mécanisme de complétion automatique dans un élément d'entrée de type text ? Comment ferais-je cela?

Answer 1

Vous pouvez configurer l'auto-complétion pour prendre ses données à partir d'une URL, de sorte que je peux voir que cela est utilisé de différentes manières avec Textpattern.

Le format de tableau utilisé par la saisie semi-automatique se présente comme suit:

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

Étant donné que vous avez plus de 5000 éléments, vous pouvez créer une page qui les répertorie simplement sous 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 d'un champ de sélection, vous devez configurer 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 encore les choses, 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 la saisie semi-automatique de sorte que 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 masqué

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 placer ces données dans un tableau:

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

Enfin, vous pouvez utiliser un plug-in à complétion automatique tel que celui-ci . :

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

Consultez la page de démonstration du plug-in à complétion automatique pour voir ce que options que vous pouvez utiliser (comme autoFill et mustMatch).

Tout ce que vous avez à faire est de le mettre dans votre en-tête HTML (jquery js, css auto-complétée & 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>

D'accord, il ne s'agit que de quelques lignes de code, mais je n'aime pas vraiment l'option "Sélectionner dans un tableau". des trucs. Si possible, vous devez créer une page qui renvoie une liste de catégories correspondant aux entrées de l'utilisateur (encore une fois, recherchez des exemples dans la page de démonstration, malheureusement, je ne peux pas vous aider beaucoup avec Textpattern).

Bien sûr, je n’ai pas testé, mais ajoutez un commentaire si vous avez une question. EDIT: J'ai testé, mais pas avec 5k éléments dans mon , sélectionnez ;)