wie man den Wert des ausgewählten Elements in der automatischen Vervollständigung

ich habe hier ein code von http://jqueryui.com/autocomplete/ es funktioniert wirklich gut, aber ich kann nicht finden, einen Weg, um den Wert des ausgewählten Elements in der text-Ansicht habe ich versucht, etwas wie dies, sondern seine nicht funktioniert

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

InformationsquelleAutor der Frage | 2013-10-30

  1. 39

    Wenn AutoVervollständigen-einen Wert zu ändern, es feuert eine autocompletechange Ereignis, nicht das change-Ereignis

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

    Demo: Fiddle

    Andere Lösung ist die Verwendung wählen Sie Ereignis, denn das change-Ereignis wird nur ausgelöst, wenn die Eingabe unscharfer

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

    InformationsquelleAutor der Antwort Arun P Johny

  2. 0

    Ich wollte etwas, das ziemlich nah an diesem - moment der Anwender wählt ein Element, auch durch nur drücken der Pfeiltasten (Fokus), möchte ich, dass Daten Element angebracht, um das tag in Frage. Wenn Sie wieder ohne Aufnahme ein anderes Element, ich will, 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);
    });
})();

    In diesem Ort, 'autocompleteselect' und 'autocompletefocus' noch Feuer, wenn Sie erwarten, aber die volle Daten-Element, das ausgewählt wurde, ist immer direkt an dem tag als Ergebnis. 'autocompleteclear' nun ausgelöst, wenn die Auswahl gelöscht wird, in der Regel durch die Eingabe etwas anderes.

    InformationsquelleAutor der Antwort Chris Moschini

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

    InformationsquelleAutor der Antwort user1012506

Schreibe einen Kommentar