javascript - Materialisecss 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”时，我需要触发一个 onchange 事件并传递值“APPLE”，但上述程序触发 onchange 事件两次，一次传递“AP”，下一次传递“苹果”。我怎样才能触发后一个事件。任何意见将是有益的。谢谢。

here is a working jsfiddle program.

Answer 1

When i type "AP" and selects "APPLE" from the autocomplete, i need one onchange event to be triggered passing the value "APPLE" but the above program triggers onchange event twice, one passing "AP" and the next passing "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 )中使用此方法:

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>

不同的方法可以基于 isTrigger property of event object在 jQuery 中。是的，因为第二个 onchange 事件是从 jQuery 触发的，您可以针对此值进行测试:

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

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

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

代码片段:

function sendItem(ele, e) {
    if (e.isTrigger != undefined) {
        console.log(ele.value + '   url if any: ' + $(ele).nextAll('.dropdown-content').find('img').attr('src'));
    }
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'http://placehold.it/250x250'
        },
        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" onchange="sendItem(this, event)">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>