17

我这里有一个来自http://jqueryui.com/autocomplete/的代码，它工作得非常好，但我找不到在文本视图中获取所选项目值的方法我尝试了这样的方法，但它不起作用

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

5 回答 5

43

当自动完成更改一个值时，它会触发一个autocompletechange事件，而不是 change 事件

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

演示：小提琴

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

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

演示：小提琴

于 2013-10-30T06:14:42.483 回答
23

为了更笼统地回答这个问题，答案是：

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 );
        }
    });
});
<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" />

于 2014-10-28T21:07:12.143 回答
1 
$(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);
    });
});
于 2016-07-11T10:45:36.430 回答
0

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

(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' 现在会在清除该选择时触发，通常是通过键入其他内容。

于 2014-09-09T08:03:33.090 回答
0

好的，所以在我的特殊情况下，我有多个使用相同类的文本输入，所有这些都使用具有相同自动完成数据集的 jQuery Autocomplete。

由于所有这些输入都需要设置它们的值才能通过 $_POST 成功提交，所以我很困惑为什么在从预定义的自动完成列表中选择一个值后不会为每个输入的 value 属性设置所选值.

经过很多来回，并且由于所有提到的输入共享相同的核心类，这就是我最终要做的：

// setup autcomplete
$('.sample-input').autocomplete({

    // define source data
    source: autocomp_data,

    // setup input event as per docs
    select: function(event, ui) {

        // set the target element
        let target = $(this);

        // retrieve selected value from event
        let selected = ui.item.value;

        // set target value using .attr (using .val() does not work, for some reason)
        target.attr('value', selected);
    }
});

通过这种方式，我实际上能够为每个输入设置正确的值并通过 $_POST 提交工作。不知道为什么jQuery UI Autocomplete 默认情况下不这样做（我相信 SE 上的一些专家知道），但是是的，上面的代码片段为我解决了这个问题。

于 2021-12-15T22:06:02.747 回答