Инициирующее событие автоматического выбора всплывающего списка с помощью JavaScript

Question

Ранее я вводил значения 1111, 1222 и 1333 в текстовый ввод HTML. Теперь, если я введу 1 для ввода текста, он должен отобразить список со значениями 1111, 1222 и 1333 в качестве доступных параметров. Как вызвать событие, когда выбран какой-либо из этих параметров?

У меня есть функция javascript, которая выполняет вычисление значений, введенных в текстовый ввод через событие «onkeyup». Это работает очень хорошо, если пользователь просто вводит значение с клавиатуры. Однако это не работает, если пользователь выбирает ранее введенное значение из автоматического всплывающего списка.

Я знаю, что мы можем отключить автоматический всплывающий список, добавив autocomplete = "off" в форму / ввод текста. Но есть ли какое-нибудь решение, чтобы оно работало с автоматическим всплывающим списком? Я перепробовал все доступные варианты событий, включая «onchange», но ни одна из них не работает.

HTML-код очень прост:

<input id="elem_id_1" name="output" type="text" value="0" onkeyup="update();"/>

Функция js тоже очень проста:

function update() {
  var a = $('elem_id_1').value;
  $('elem_id_2').value = a / 100;
}

Answer 1

Вы пробовали событие onchange? Я не уверен, что он запускается для автоматического завершения выбора, но вы также можете попробовать событие onpropertychange и проверить свойство value:

textInput.onpropertychange = function ()
{
    if (event.propertyName == "value")
        doCalculation();
}

Это также будет работать при щелчке правой кнопкой мыши -> вставить или щелкнуть правой кнопкой мыши -> вырезать, что не приведет к запуску вашего расчета с использованием текущего метода.

EDIT

Похоже, вам, возможно, придется использовать комбинацию событий и таймеров. Установите интервал на фокус редактирования и очистите его на размытие. Я также использовал бы onpropertychange для IE, чтобы сделать его более эффективным, и сохранить событие keyup, чтобы сделать его также довольно быстрым.

//- If it's IE, use the more efficient onpropertychange event
if (window.navigator.appName == "Microsoft Internet Explorer")
{
    textInput.onpropertychange = function ()
    {
        if (event.propertyName == "value")
            doCalculation();
    }
}
else
{
    var valueCheck, lastValue = "";
    textInput.onkeyup = function ()
    {
        doCalculation();
    }
    textInput.onfocus = function ()
    {
        valueCheck = window.setInterval(function ()
        {
            // Check the previous value against (and set to) the new value
            if (lastValue != (lastValue = textInput.value))
               doCalculation();
        }, 100);
    }
    textInput.onblur = function ()
    {
        window.clearInterval(valueCheck);
    }
}

Если ваша процедура расчета крошечная (как простое математическое уравнение), я бы просто пропустил предыдущую проверку значений и выполнял вычисления каждые 100 мс.