вызов ajax, ошибка с добавлением результатов в опции

Question

У меня нет действительно функциональных проблем с этим скриптом, но здесь есть небольшая ошибка, которую я не могу выяснить.

Процесс: пользователь вводит в поле ввода #productInput. При каждом нажатии клавиши введенное ими значение отправляется конечной точке через ajax, результаты запроса возвращаются и добавляются в выпадающий список <option> для значения <datalist>. Это работает, но вот проблема:

Если я наберу 'TES', я смогу увидеть 7 товаров (TEST1, TEST2, TEST3, TEST4, TEST5, TEST6, TEST7). Но когда я заканчиваю слово и набираю «ТЕСТ», он показывает только один или два из этих результатов, хотя все они содержат слово ТЕСТ. Есть ли здесь очевидная проблема, вызывающая эту ошибку, которую я пропускаю?

$('#productInput').on('input', function() {

  let _this = $(this);
  let foundOption;
  let optSelector = `option[value='${_this.val()}']`;

  if (_this.val() === '') {
    return;
  } else if ($('#returnedProducts').find(optSelector).length) {
     console.log("else");
  } else {

    const searchResult = $(this).val();

    $.ajax({ url: '/autocomplete', 
      data: {
        search_result:searchResult
      },
      "_token": "{{ csrf_token() }}",
      type: "POST", 
      success: function (response) {

        console.log(response);
        $("#returnedProducts").empty();

        var result = response.hits.hits;

        //for each result in the object, append to option list
        for (let i = 0; i < result.length; i++) {
          $("#returnedProducts").append($("<option/>",
                    {
                        "srindex": i,
                        "data-attributes": JSON.stringify(result[i]._source.frame.group),
                        "data-covers":JSON.stringify(result[i]._source.covers[1]),
                        "value": result[i]._source.group_cover_color,
                        "html": result[i]._source.group_cover_color,
                    }
            ));

        }
    }
    });
  }
});