come ottenere il valore dell'articolo selezionato in completamento automatico

ho qui un codice da http://jqueryui.com/autocomplete/ funziona davvero bene ma non riesco a trovare un modo per ottenere il valore della voce selezionata nella vista del testo ho provato qualcosa di simile, ma non funzionacome ottenere il valore dell'articolo selezionato in completamento automatico

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

fonte

2013-10-30 Anonymous

http://jqueryui.com/autocomplete/ # dati personalizzati: verifica questo URL –

non utilizzare '.ready()' in jQM. – Omar

@ Omar cosa suggerisci è un'idea migliore? –

Quando completamento automatico cambia un valore, si attiva un evento autocompletechange, non l'evento di modifica

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

Demo: Fiddle

Un'altra soluzione è quella di utilizzare select evento, perché l'evento di modifica viene attivato solo quando l'ingresso è sfocata

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

fonte

2013-10-30 06:14:42

Ma quando viene chiamato l'evento di sfocatura sulla casella di testo, solo l'output è corretto, –

, ma quando cambio l'elemento il valore in tagname rimane lo stesso come dovrei aggiornare questo? e il ritardo è così lungo c'è un modo per ridurre il ritardo? –

@satinekianne vedere l'aggiornamento –

Volevo qualcosa di molto vicino a questo - il momento in cui un utente sceglie un elemento , anche premendo i tasti freccia su uno (focus), voglio che l'elemento dati sia attaccato al tag in questione. Quando digitano di nuovo senza selezionare un altro elemento, voglio che i dati vengano cancellati.

(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 questo in luogo, 'autocompleteselect' e 'autocompletefocus' Fire ancora a destra quando ci si aspetta, ma il dato completo che è stato selezionato è sempre disponibile a destra sul cartellino di conseguenza. "autocompleteclear" ora si attiva quando quella selezione viene cancellata, generalmente digitando qualcos'altro.

fonte

2014-09-09 08:03:33

Per rispondere alla domanda, più in generale, la risposta è:

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

completo esempio:

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

fonte

2014-10-28 21:07:12

Penso che questa sia completa risposta – 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); 
    }); 
});

fonte

2016-07-11 10:45:36 user1012506

Anche se questo codice può essere d'aiuto per risolvere il problema, fornisce un contesto aggiuntivo riguardo _why_ e/o _how_ it risponde alla domanda migliorerebbe significativamente il suo valore a lungo termine . Per favore [modifica] la tua risposta per aggiungere qualche spiegazione . –

come ottenere il valore dell'articolo selezionato in completamento automatico

risposta

Problemi correlati