Javascript найти в списке

Question

<datalist id="MyList">
            <option title="SomeId">SomeName</option>
            <option title="SomeId">SomeName</option>
            <option title="SomeId">SomeName</option>
            <option title="SomeId">SomeName</option>
</datalist>

Подключено к этому входу:

<input id="MyPicker" type="text" list="MyList" onclick="this.value = ''">

Тогда у меня есть этот код:

document.querySelector('input[list="MyList"]').addEventListener('input', onInput);
function onInput(e) {
        var input = e.target,
            val = input.value;
        list = input.getAttribute('list'),
            options = document.getElementById(list).childNodes;

        var myItem;
        for (var i = 0; i < options.length; i++) {
            var trimmed_option = options[i].innerText;
            try {
                trimmed_option = trimmed_option.trim();
            } catch (err) { }
            if (trimmed_option == val.trim()) {
                myItem = options[i];
                alert("I got it");
                break;
            }
        }
}

Я делаю следующее: нахожу текущий элемент в списке. Однако я могу найти предмет только в некоторых случаях.

Что я хочу сделать: я хочу иметь возможность находить предмет каждый раз.

Моя идея: я могу найти его на основе id из <option>, но я не смог этого сделать.

Спасибо за помощь.

Answer 1

Я действительно не уверен, чего вы хотите. Механизм <datalist>, который вы здесь используете, уже работает без JavaScript, см. Ниже (я закомментировал вложение слушателя событий). Чего именно вы хотите достичь с помощью своего сценария?

// document.querySelector('input[list="MyList"]').addEventListener('input', onInput);
function onInput(e) {
    var input = e.target,
        val = input.value;
    list = input.getAttribute('list'),
        options = document.getElementById(list).childNodes;

    var myItem;
    for (var i = 0; i < options.length; i++) {
        var trimmed_option = options[i].innerText;
        try {
            trimmed_option = trimmed_option.trim();
        } catch (err) { }
        if (trimmed_option == val.trim()) {
            myItem = options[i];
            alert("I got it");
            break;
        }
    }
}

<datalist id="MyList">
        <option title="hp">Harry Potter</option>
        <option title="hg">Hermione Granger</option>
        <option title="rw">Ron Weasley</option>
        <option title="gw">Ginny Weasley</option>
</datalist>
<input id="MyPicker" type="text" list="MyList" onclick="this.value = ''">