web-dev-qa-db-fra.com

comment obtenir la valeur de l'item sélectionné en autocomplétion

j'ai ici un code de http://jqueryui.com/autocomplete/ cela fonctionne vraiment bien, mais je ne peux pas trouver un moyen d'obtenir la valeur de l'élément sélectionné dans la vue texte. 

<script>
$(document).ready(function () {
    $('#tags').change(function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});
</script>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "LISP",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
<script>
$(document).ready(function () {
    $('#tags').change(function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});
</script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
  <div id="tagsname"></div>
</div>


</body>
</html>
jqueryjquery-uijquery-mobileautocomplete
13
user2805663

Lorsque la saisie semi-automatique modifie une valeur, elle déclenche un événement autocompletechange , pas l'événement change

$(document).ready(function () {
    $('#tags').on('autocompletechange change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});

Démo: Fiddle

Une autre solution consiste à utiliser select event, car l'événement de modification n'est déclenché que lorsque l'entrée est floue.

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

Démo: Fiddle

40
Arun P Johny

Pour répondre à la question plus généralement, la réponse est:

select: function( event , ui ) {
    alert( "You selected: " + ui.item.label );
}

Exemple complet:

$('#test').each(function(i, el) {
    var that = $(el);
    that.autocomplete({
        source: ['Apple','banana','orange'],
        select: function( event , ui ) {
            alert( "You selected: " + ui.item.label );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Type a fruit here: <input type="text" id="test" />

19
Alain Tiemblo
$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('blur', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});
0
user1012506

Je voulais quelque chose d'assez proche: dès qu'un utilisateur sélectionne un élément, même en appuyant simplement sur les touches fléchées du curseur (focus), je souhaite que cet élément de données soit associé à la balise en question. Quand ils tapent à nouveau sans choisir un autre élément, je veux effacer ces données.

(function() {
    var lastText = '';

    $('#MyTextBox'), {
        source: MyData
    })
    .on('autocompleteselect autocompletefocus', function(ev, ui) {
        lastText = ui.item.label;
        jqTag.data('autocomplete-item', ui.item);
    })
    .keyup(function(ev) {
        if (lastText != jqTag.val()) {
            // Clear when they stop typing
            jqTag.data('autocomplete-item', null);

            // Pass the event on as autocompleteclear so callers can listen for select/clear
            var clearEv = $.extend({}, ev, { type: 'autocompleteclear' });
            return jqTag.trigger(clearEv);
    });
})();

Avec ceci en place, 'autocompleteselect' et 'autocompletefocus' continuent à se déclencher comme prévu, mais l'intégralité de l'élément de données sélectionné est toujours disponible directement sur le tag. 'autocompleteclear' se déclenche maintenant lorsque cette sélection est effacée, généralement en tapant autre chose.

0
Chris Moschini