cómo obtener el valor del elemento seleccionado en autocompletar

Tengo aquí un código de http://jqueryui.com/autocomplete/ que funciona muy bien, pero no puedo encontrar el modo de obtener el valor del elemento seleccionado en la vista de texto, intenté algo así, pero no funciona

 $(document).ready(function () { $('#tags').change(function () { $('#tagsname').html('You selected: ' + this.value); }).change(); });      jQuery UI Autocomplete - Default functionality      $(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 }); });   $(document).ready(function () { $('#tags').change(function () { $('#tagsname').html('You selected: ' + this.value); }).change(); });    

Cuando la función de autocompletar cambia un valor, se activa un evento de autocompletar cambio, no el evento de cambio

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

Demostración: Fiddle

Otra solución es usar seleccionar evento, porque el evento de cambio se activa solo cuando la entrada es borrosa

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

Demostración: Fiddle

Para responder la pregunta de manera más general, la respuesta es:

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

Ejemplo completo:

 $('#test').each(function(i, el) { var that = $(el); that.autocomplete({ source: ['apple','banana','orange'], select: function( event , ui ) { alert( "You selected: " + ui.item.label ); } }); }); 
    Type a fruit here:  

Quería algo muy parecido a esto: en el momento en que un usuario escoge un artículo, incluso con solo presionar las teclas de flecha a uno (enfoque), quiero que ese elemento de datos se adjunte a la etiqueta en cuestión. Cuando vuelven a escribir sin seleccionar otro artículo, quiero que se borren los datos.

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

Con esto en su lugar, ‘autocompleteselect’ y ‘autocompletefocus’ aún se disparan correctamente cuando espera, pero el elemento de datos completo que se seleccionó siempre está disponible directamente en la etiqueta como resultado. ‘autocompleteclear’ ahora se dispara cuando se borra esa selección, generalmente escribiendo algo más.

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