Jak uzyskać wartość wybranego elementu w autouzupełnieniu

Mam tutaj kod z http://jqueryui.com/autocomplete/ działa naprawdę dobrze, ale nie mogę znaleźć sposób, aby uzyskać wartość wybranego elementu w widoku tekstowym Próbowałem coś takiego, ale nie działaJak uzyskać wartość wybranego elementu w autouzupełnieniu

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

Źródło

2013-10-30 Anonymous

http://jqueryui.com/autocomplete/ # niestandardowe dane - sprawdź ten URL –

nie używaj '.ready()' w jQM. – Omar

@Omar co sugerujesz, to lepszy pomysł? –

Gdy autouzupełnianie zmienia wartość, wystrzeliwuje autocompletechange razie nie zdarzenie zmiany

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

Demo: Fiddle

Innym rozwiązaniem jest użycie select imprezę, ponieważ zdarzeniem, zmiana jest wyzwalany tylko wtedy, gdy wejście jest niewyraźne

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

Źródło

2013-10-30 06:14:42

Ale kiedy zdarzenie blur jest wywoływane w polu tekstowym, to tylko otrzymujemy wyjście poprawne –

jego działanie, ale kiedy zmieniam pozycję, wartość w tagsname pozostaje taka sama jak powinienem to odświeżyć? a opóźnienie jest tak długie, że istnieje sposób na skrócenie opóźnienia? –

@satinekianne zobacz aktualizację –

chciałem coś całkiem blisko tego - moment użytkownik wybiera pozycję , nawet po prostu naciśnięcie klawiszy ze strzałką na jeden (focus), chcę ten element danych dołączony do danego znacznika. Kiedy ponownie wpisują, nie wybierając innego przedmiotu, chcę, aby dane zostały wyczyszczone.

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

Mając to na miejscu „autocompleteselect” i „autocompletefocus” nadal strzelać rację, kiedy można się spodziewać, ale pełny element danych, który został wybrany jest zawsze dostępna bezpośrednio na znaczniku wyniku. "autocompleteclear" jest teraz uruchamiany, gdy zaznaczenie jest wyczyszczone, na ogół przez wpisanie czegoś innego.

Źródło

2014-09-09 08:03:33

Aby bardziej ogólnie odpowiedzieć na pytanie, odpowiedź brzmi:

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

Kompletny przykład:

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

Źródło

2014-10-28 21:07:12

Myślę, że to jest pełna odpowiedź. – NaveenDA

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

Źródło

2016-07-11 10:45:36 user1012506

Mimo że ten kod może pomóc w rozwiązaniu problemu, zapewnia dodatkowy kontekst w odniesieniu do _why_ i/lub _how_ it Odpowiedzi na pytanie znacznie poprawiłoby jego długoterminową wartość: . Proszę [edytuj] swoją odpowiedź, aby dodać wyjaśnienie w postaci . –

Jak uzyskać wartość wybranego elementu w autouzupełnieniu

Odpowiedz

Powiązane problemy