JQuery Autocomplete с большим количеством данных

Question

У меня есть приложение, разработанное с использованием чистого JSP и сервлета. На одной из моих страниц JSP у меня есть поле, где оно должно быть автоматически завершено, когда пользователь начнет вводить текст. Для этой цели я использовал JQuery Auto Complete (https://jqueryui.com/autocomplete/).

Что я делаю, я загружаю данные из своей базы данных с помощью сервлета и передаю эти данные в JSP как Bean. В моем JSP я использую JSTL внутри JavaScript для подачи поля автозаполнения.

Ниже приведен код

<script> 
      $(function() { 
       var availableTags=[] ; 

       <c:forEach var="NamesList" items="${requestScope['NamesList']}"> 
        availableTags.push("${NamesList.Name}"); 
       </c:forEach> 

       $("#addTxt").autocomplete({ 
        source: availableTags 
       }); 
       $("#addTxt").autocomplete("option", "appendTo", ".form-horizontal"); 



      }); 
</script> 



<input id="addNameTxt" name="nameTxt" class="form-control input-md" > 

Но вот лучшая часть. Этот список содержит 22 500 элементов. Некоторые из них - длинные имена, которые могут содержать более 50/60 слов. Теперь проблема в том, что, хотя для загрузки страницы не требуется много времени, «иногда» она застревает, когда начинается автозапуск. Я предполагаю, что он ищет множество элементов и выходит из памяти или что-то в этом роде.

Я также заметил поведение ниже, которое может вызвать это отставание. Представьте, что у меня есть такие тексты, как ниже.

Cat/Bat/Dog/Space ship/FrontLine 
Cat 
Bat 
Space Ship 

Если я типа «Летучая мышь», мое ожидание, чтобы найти текст начиная с «Летучая мышь», а не тексты, которые могут содержать «Летучая мышь» где-то в середине. Поскольку этот вид поиска занимает много времени, я думаю, что он тоже получает лагги, когда есть 22 500 записей. Во всяком случае, это просто примечание.

Итак, как я могу исправить эту проблему и сделать автоматическое завершение быстро?

Answer 1

Чтобы найти текст , начинающийся с "Bat" вам нужно добавить следующее regex в свой автозаполненный вызов. Это также может привести к быстрому завершению авто.

$("#addTxt").autocomplete({ 
    source: function(req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp("^" + re, "i"); 
       var a = $.grep(availableTags, function(item,index){ 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      } 
}); 

Answer 2

Нашли полное рабочее решение. Вы можете получить его здесь

jQuery autocomplete UI with servlet is not returning any data