Materializecss Autocomplete 上的两个 onChange 事件

Question

设想：

我正在使用 Materializecss 自动完成功能，当我从自动完成框中选择一个项目时，应该触发一个 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” . 我怎样才能触发后一个事件。任何意见将是有益的。谢谢你。

这是一个有效的 jsfiddle 程序。

Answer 1

当我键入“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：功能（txt）{

  sendItem(txt);
  

  },

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

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

sendItem(txt);

一种不同的方法可以基于jQuery中事件对象的isTrigger 属性。对，因为第二个 onchange 事件是从 jQuery 触发的，您可以针对此值进行测试：

function sendItem(val, e) {
    if (e.isTrigger != undefined) {
        console.log(val);
    }
}

这意味着您必须将事件参数添加到内联函数中：

onchange="sendItem(this.value, event)"

片段：

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>