it-swarm.com.de

so erhalten Sie den Wert des ausgewählten Elements in der automatischen Vervollständigung

ich habe hier einen Code aus http://jqueryui.com/autocomplete/ es funktioniert wirklich gut, aber ich kann keinen Weg finden, um den Wert des ausgewählten Elements in der Textansicht zu ermitteln. Ich habe so etwas versucht, aber es funktioniert nicht 

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

Wenn Autocomplete einen Wert ändert, wird ein autocompletechange - Ereignis ausgelöst, nicht das Change-Ereignis

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

Demo: Fiddle

Eine andere Lösung ist die Verwendung des select -Ereignisses, da das Änderungsereignis nur ausgelöst wird, wenn die Eingabe unscharf ist

$(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);
    });
});

Demo: Fiddle

40
Arun P Johny

Um die Frage allgemeiner zu beantworten, lautet die Antwort:

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

Vollständiges Beispiel:

$('#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

Ich wollte etwas ganz nah dran - in dem Moment, in dem ein Benutzer einen Artikel auswählt, selbst wenn er nur die Pfeiltasten auf einen Punkt (Fokus) drückt, möchte ich, dass das Datenelement an den betreffenden Tag angehängt wird. Wenn sie erneut tippen, ohne ein anderes Element auszuwählen, möchte ich, dass die Daten gelöscht werden.

(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);
    });
})();

Wenn dies aktiviert ist, werden 'autocompleteselect' und 'autocompletefocus' zwar immer dann ausgelöst, wenn Sie es erwarten, aber das gesamte ausgewählte Datenelement steht als Ergebnis immer direkt am Tag zur Verfügung. 'autocompleteclear' wird jetzt ausgelöst, wenn die Auswahl aufgehoben wird, im Allgemeinen durch Eingabe eines anderen Befehls.

0
Chris Moschini