如何获取自动完成中所选项目的值

我在这里有一个来自http://jqueryui.com/autocomplete/的代码它工作得很好，但我无法找到一种方法来获取文本视图中所选项目的价值我试过这样的东西，但它没有工作

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

Answer 1

当自动填充更改值时，它会触发autocompletechange事件，而不是更改事件

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

演示： 小提琴

另一种解决方案是使用select事件，因为只有在输入模糊时才会触发更改事件

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

演示： 小提琴

Answer 2

为了更广泛地回答这个问题，答案是：

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

完整的例子：

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

Answer 3

我想要一些非常接近的东西 – 用户选择一个项目的那一刻，即使只是将箭头键击中一个（焦点），我希望该数据项附加到相关标签上。 当他们再次输入而不选择另一个项目时，我希望清除该数据。

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

有了这个，’autocompleteselect’和’autocompletefocus’仍然会在您预期的时候正确启动，但是所选的完整数据项始终在标签上可用。 ‘autocompleteclear’现在在清除选择时触发，通常是输入其他内容。

Answer 4

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