jQuery - 检索自动完成元素的值答案

【问题标题】：jQuery - retrieve value of autocomplete elementjQuery - 检索自动完成元素的值
【发布时间】：2018-11-16 00:28:30
【问题描述】：

我想检索自动完成文本框的值。我尝试使用以下代码，但它不起作用：

$('#my_id').bind('result',function(){});

任何建议都会有所帮助。我不想使用 .text() 因为它不满足我的要求。一些类似于“结果”的东西会很好。

【问题讨论】：

完全不清楚你的问题是什么。请清楚说明您面临的问题以及预期的结果。顺便说一句，.on() 不久前在 JQuery 中取代了 .bind()。
on() 是替代品。我假设这是一个第三方插件，它正在创建一个您试图挂钩的 result 事件？
我们正在使用 jquery-ui，但我们已经在某处阅读以从自动完成中获取数据，我们必须使用 .bind('result') 并且没有任何事件在工作。我尝试过 .on() 作为好吧，但结果是一样的

标签： jquery jquery-ui autocomplete

【解决方案1】：

有 2 个选项。

A) 使用 autocomplete 的事件处理程序 select：

$("#my_id").autocomplete({..., select: function(event, ui){...}});

B) 使用事件处理程序autocompleteselect：

$("#my_id").on("autocompleteselect", function(event, ui){...}});

在调试器中您可以看到，两种情况下的事件都具有相同的类型autocompleteselect。这两种方法是等效的。如果您希望将所有相关代码放在一个块中，您可以选择 A。如果您希望将自动完成列表的填充与选择的反应强分离，您可以选择 B。

A 示例：

在输入字段中输入“a”或“j”以查看其工作原理。

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      var availableItems = [
        "ActionScript", "AppleScript", "Groovy", "Java", "JavaScript", "Python", "Scala"
      ];
      $("#my_items").autocomplete({
        source: availableItems,
        select: function(event, ui) {
          alert(
            "input: " + event.target.value + "\n" +
            "label: " + ui.item.label + "\n" +
            "value: " + ui.item.value);
        }
      });
    });
  </script>
</head>

<body>

  <div class="ui-widget">
    <label for="my_items">Items: </label>
    <input id="my_items">
  </div>


</body>

</html>

B 示例：

在输入字段中输入“a”或“j”以查看其工作原理。

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      var availableItems = [
        "ActionScript", "AppleScript", "Groovy", "Java", "JavaScript", "Python", "Scala"
      ];
      $("#my_items").autocomplete({
        source: availableItems
      });

      $("#my_items").on("autocompleteselect", function(event, ui) {
          alert(
            "input: " + event.target.value + "\n" +
            "label: " + ui.item.label + "\n" +
            "value: " + ui.item.value);
      });

    });
  </script>
</head>

<body>

  <div class="ui-widget">
    <label for="my_items">Items: </label>
    <input id="my_items">
  </div>


</body>

</html>

【讨论】：