Question

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

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

任何建议都会有所帮助。我不想使用.text（），因为它不符合我的要求。有些类似于'结果'的东西会很棒。

Answer 1

有两种选择。

A）使用自动填充的事件处理程序选择：

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

jQuery - 检索自动完成元素

1 个答案: