web-dev-qa-db-fra.com

Catégories de saisie semi-automatique jQuery Sélectionnez le libellé et la valeur

Essayer d'obtenir la saisie semi-automatique jQuery avec des catégories pour renvoyer la valeur sélectionnée dans le champ de recherche et la valeur dans un champ de saisie séparé.

J'ai modifié les données pour qu'elles aient une valeur ainsi qu'une étiquette et une catégorie.

Voir http://jsfiddle.net/chrisk/bM7ck/

Mais la valeur est toujours renvoyée au champ de recherche au lieu de l'étiquette.

jqueryjquery-uiautocompletejquery-ui-autocomplete
20
chrisk

C'est ainsi que la saisie semi-automatique jquery ui fonctionne lorsque vous fournissez à la fois une étiquette et une valeur. Si vous souhaitez que l'étiquette soit renvoyée dans le champ de recherche, renommez le champ de valeur.

Violon mis à jour: http://jsfiddle.net/jensbits/bM7ck/3/

27
jk.

Vous êtes proche, il vous suffit de:

  1. Ajouter return false à la fin de votre gestionnaire d'événements select, et
  2. Ajoutez un gestionnaire d'événements pour l'événement focus afin de pouvoir également le remplacer en utilisant l'étiquette au lieu de la valeur.

Voici votre code mis à jour:

$("#search").catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui) {
        $('#search').val(ui.item.label);
        $('#searchval').val(ui.item.value);
        return false; // Prevent the widget from inserting the value.
    },
    focus: function(event, ui) {
        $("#search").val(ui.item.label);
        return false; // Prevent the widget from inserting the value.
    }
});

Voici un exemple mis à jour: http://jsfiddle.net/q2kDU/

22
Andrew Whitaker
$(function() {
        $( "#searchitems" ).autocomplete({
            source: [<?php echo $search /*example for full list in php*/?>],
            minLength: 2,
            select: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $('#searchitemvalue').val(ui.item.value);
                window.location="#"; //location to go when you select an item
            },
            focus: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $('#searchitemsvalue').val(ui.item.value);
            }
        });
    });
3
Ismael Miguel