如何使用Materialize在onAutocomplete上获取元素属性 [英] How to get element attributes onAutocomplete with Materialize

问题描述

我在3个输入元素上使用了相同的Materialize Autocomplete.然后在onAutocomplete()上，我需要获取使用自动完成功能的元素的ID，以便可以在正确的位置填充数据.所以我想知道它是 autocomplete-input1 还是 autocomplete-input2 .如何使用纯JavaScript做到这一点?

I am using the same Materialize Autocomplete on 3 input elements. Then on onAutocomplete() I need to get the ID of the element the autocomplete was used on so I can populate data in the right place. So I want to know if it was either autocomplete-input1 or autocomplete-input2. How can I do that in pure javascript?

<div class="col s12">
    <div class="row">
        <div class="input-field col s6">
            <input type="text" id="autocomplete-input1" class="autocomplete" autocomplete="off">
            <label for="autocomplete-input1">Input1: Type my name - Radek</label>
        </div>            
        <div class="input-field col s6">
            <input type="text" id="autocomplete-input2" class="autocomplete" autocomplete="off">
            <label for="autocomplete-input2">Input2: Type my name - Radek</label>
        </div>
    </div>
</div>

我想知道用户输入的元素ID并使用自动完成功能.javascript代码将成为onAutocomplete函数的一部分.我尝试了几种选择，但都没有用.

I want to know the ID of element user typed something and use the autocomplete. The javascript code would be part of the onAutocomplete function. I tried few options but none worked.

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Radek Surname <br>  [e-mail]": null,
            "Radek": null,
            "Radoslav": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
          console.log(this.getAttribute("id"));
          console.log(this.id);
          console.log(this.innerHTML);
          console.log(this.innerText);
          console.log(this.outerHTML);
        },
        limit: 20, 
    });

});

您可以使用此 jsFiddle 和..

推荐答案

示例1- JsFiddle

$(function () {
    const selector = 'input.autocomplete';
    let currentActiveAutoCompleteInput = null;
    document.querySelectorAll(selector).forEach(el => {
        el.onchange = function(evt) {
            currentActiveAutoCompleteInput = evt.target;
        };
    });
    $(selector).autocomplete({
        data: {
            "Radek Surname <br>  [e-mail]": null,
            "Radek": null,
            "Radoslav": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
            console.log(currentActiveAutoCompleteInput.id);
        },
        limit: 20, 
    });
});

示例2- JsFiddle

$(function () {
    let currentActiveAutoCompleteInput = null;
    $('input.autocomplete')
    .on('change', function(evt) {
        currentActiveAutoCompleteInput = evt.target;
    })
    .autocomplete({
        data: {
            "Radek Surname <br>  [e-mail]": null,
            "Radek": null,
            "Radoslav": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
          console.log(currentActiveAutoCompleteInput.id);
        },
        limit: 20, 
    });
});

这篇关于如何使用Materialize在onAutocomplete上获取元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！