Question

情景：

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

here is a working jsfiddle program.

Answer 1

当我输入“AP”并从自动完成中选择“APPLE”时，我需要一个onchange事件被触发传递值“APPLE”但是上面的程序触发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>

另一种方法可以基于jQuery中的isTrigger property of event object。正确，因为第二个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>

Materialisecss自动填充中的两个onChange事件

1 个答案: