Автозаполнение выпадающего списка

Question

Зависимый раскрывающийся список автозаполнения, когда текст вводится при вводе, он автоматически завершается только по первым буквам, как заставить его работать с любой буквой, например, если я набираю - «Йо» должно показывать «Нью-Йорк» в выпадающем списке. Вот мой код для этого, но он показывает только первые буквы.

var states = {
  'Color': ['red', 'black', 'yellow', 'green', ],
  'Numbers': ['one', 'two', 'three', 'four']
};

function match(str) {
     str = str.toLowerCase();
     clearDialog();
 for (var i = 0; i < states.color.length; i++) {

  if (states.color[i].toLowerCase().startsWith(str)) {
jQuery('.dialog').append('<div>' + states.color[i] + '</div>');

}}}

Answer 1

Использование indexOf:

if (states.color[i].toLowerCase().indexOf(str) !== -1) {
    jQuery('.dialog').append('<div>' + states.color[i] + '</div>');
}

Или более современный подход с includes:

if (states.color[i].toLowerCase().includes(str)) {
    jQuery('.dialog').append('<div>' + states.color[i] + '</div>');
}

Answer 2

Вы пытались переключить .startsWith (str) на .include (str)?

, чтобы быть более конкретным:

if (states.color[i].toLowerCase().includes(str)) {
    jQuery('.dialog').append('<div>' + states.color[i] + '</div>');
}