Изменить параметр выбора на основе поля ввода динамически при вводе

Question

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

<input id="userInput" type="text" class="form-control" placeholder="Type here">

<select id="sel" class="form-control form-control-xl">
  <option selected>Choose one</option>
  <option value="1">Dog</option>
  <option value="2">Cat</option>
  <option value="3">Lizard</option>
  <option value="4">Fish</option>
</select>

Опция основана на логике, например, так:

var userInput = document.getElementById('userInput').value;
var sel = document.getElementById('sel');

if (userInput firstletter is Z and followed by numbers) {
    $('#sel').val('1').change(); // Dog
} else if (userInput beginsWith === AB and endsWith === YZ with numbers between) {
    $('#sel').val('2').change(); // Cat
} else if (userInput endsWith === XX) {
    $('#sel').val('3').change(); // Lizard
} else if (userInput beginsWith === 222) {
    $('#sel').val('4').change(); // Fish
}

Как правильно изменитьОпция аналогична полю поиска с автозаполнением?

Answer 1

Вы можете создать regex для каждого вашего паттерна как dictionary.Затем вы можете выполнить цикл и сопоставить его при изменении значения текстового поля.

var dict = []; // create an empty array

window.onload = function(){

dict.push({key:   "1",  value: "^z+[0-9]*$"}); //firstletter is Z and followed by numbers
dict.push({key:   "2",  value: "^AB.[0-9]*YZ$"}); //beginsWith === AB and endsWith === YZ with numbers between
dict.push({key:   "3",  value: "^Cat$"});
dict.push({key:   "4",  value: "^Lizard$"});
dict.push({key:   "5",  value: "^Fish$"});

}


function test()
{

var userInput = document.getElementById('userInput').value;
var sel= document.getElementById('sel');
sel.value = "";
var isMatched = false;

 for(var i = 0; i < dict.length; i++)
    {
        var reg = eval("/" + dict[i].value + "/gi");
        
        isMatched = reg.test(userInput);
        console.log(i + " " +userInput + " " + isMatched + " Key: " + dict[i].key);
        
        if (isMatched)
        {
          sel.value = dict[i].key;
          break;
        }   
      }
}

<input id="userInput" type="text" class="form-control" placeholder="Type here" onchange="test()" onchange="test()">

<select id="sel" class="form-control form-control-xl">
  <option value="" selected>Choose one</option>
  <option value="1">First Letter Z and then numbers</option>
  <option value="2">Begins with AB and number in between adn ends with YZ</option>
  <option value="3">Cat</option>
  <option value="4">Lizard</option>
  <option value="5">Fish</option>
</select>