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

【问题标题】：how to get value of selected item in autocomplete如何在自动完成中获取所选项目的值
【发布时间】：2013-11-09 14:27:40
【问题描述】：

我在这里有一个来自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>

【问题讨论】：

jqueryui.com/autocomplete/#custom-data - 检查这个网址
不要在 jQM 中使用.ready()。
@Omar 你有什么更好的建议？
jquerymobile.com/demos/1.2.0/docs/api/events.html 我正在阅读这篇文章，如果我有问题，稍后再联系你。谢谢。如果我问一下使用 JQM 事件比 .ready 有什么优势，你介意吗？它会影响很多事情吗？ ?
jsfiddle.net/killwithme/ke8osq27

标签： jquery jquery-ui jquery-mobile autocomplete

【解决方案1】：

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

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

演示：Fiddle

另一种解决方案是使用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);
    });
});

演示：Fiddle

【讨论】：

但是当在文本框上调用模糊事件时，只有我们得到正确的输出
它可以工作，但是当我更改项目时，tagsname 中的值保持不变我应该如何刷新它？而且延迟这么长有没有办法让延迟更短？
@ArunPJohny 我做得非常好，但是有没有办法当我选择一个项目时，值会自动显示它需要一段时间才能显示，但如果它是这样就可以了，现在我明白你的意思了那真是太好了

【解决方案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 );
        }
    });
});

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

【讨论】：

我认为这是完整的答案
我同意这个答案，因为它使用了自动完成组件提供的事件回调。无需在事件绑定上使用 jQuery。

【解决方案3】：

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

【讨论】：

虽然此代码可能有助于解决问题，但提供有关 why 和/或如何回答问题的附加上下文将显着改善长期价值。请edit你的答案添加一些解释。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

由于所有这些输入都需要设置它们的值才能通过 $_POST 成功提交，所以我很困惑为什么在从预定义的自动完成列表。

经过多次反复，由于所有提到的输入共享同一个核心类，这就是我最终要做的：

// 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 上的某些专家知道），但是是的，上面的 sn-p 为我解决了这个问题。

【讨论】：