Materialisecss自动完成中的两个onChange事件

Posted 2021-05-02

场景：

我正在使用Materialisecss自动完成功能，当我从自动完成框中选择一个项目时，应该触发onchange事件。

码：

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="autocomplete-input" class="autocomplete" onchange="sendItem(this.value)">
        <label for="autocomplete-input">Autocomplete</label>
      </div>
    </div>
  </div>
</div>
<script>
$('input.autocomplete').autocomplete({
  data: {
    "Apple": null,
    "Microsoft": null,
    "Google": 'http://placehold.it/250x250'
  },
  limit: 20, 
});
  function sendItem(val) {
    console.log(val);
  }
</script>

问题：

当我输入“AP”并从自动完成中选择“APPLE”时，我需要通过值“APPLE”触发一个onchange事件，但上面的程序触发onchange事件两次，一个传递“AP”，下一个传递“APPLE” 。我怎样才能触发后一个事件。任何意见将是有益的。谢谢。

here is a working jsfiddle program.

答案

当我输入“AP”并从自动完成中选择“APPLE”时，我需要通过值“APPLE”触发一个onchange事件，但上面的程序触发onchange事件两次，一个传递“AP”，下一个传递“APPLE” 。

这是因为当您单击/选择实体化自动完成元素时，将执行两个操作：

• 在输入字段上触发更改事件
• 执行onAutocomplete回调

但是，您的onchange内联事件处理程序是第一次执行，因为您在按下AP之后移动到下拉列表，然后在自动完成列表元素APPLE之后移动。

涉及的实现源代码是：

// Set input value
$autocomplete.on('click', 'li', function () {
  var text = $(this).text().trim();
  $input.val(text);
  $input.trigger('change');   // your issue.......
  $autocomplete.empty();
  resetCurrentElement();

  // Handle onAutocomplete callback.
  if (typeof(options.onAutocomplete) === "function") {
    options.onAutocomplete.call(this, text);
  }
});

为了解决您的问题，您需要：

• 删除内联onchange =“sendItem（this.value）”
• 将以下回调添加到您的自动填充功能： onAutocomplete：function（txt）{ sendItem(txt); }，

在下面的代码片段（或fiddle）使用这种方法：

function sendItem(val) {
    console.log(val);
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
          sendItem(txt);
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input type="text" id="autocomplete-input" class="autocomplete">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>

以上是关于Materialisecss自动完成中的两个onChange事件的主要内容，如果未能解决你的问题，请参考以下文章

php MaterialiseCSS |自动生成自动填充功能

自动完成中的 React Material UI 打开模式失去焦点

html MaterialiseCSS多列卡流程

css FIx for materialize错误标签jQuery validation + Materialisecss

Materialisecss.com旋转木马只需要js

显示数据库表中的两个字段以填充 jquery 自动完成