Время загрузки Inputosaurus / jQuery

Question

Я использую Inputosaurus , чтобы добавить некоторые причудливые теги автозаполнения в систему управления моего клиента. Это прекрасная система с точки зрения как косметики, так и производительности.

Проблема в большом времени загрузки.

Страница HTML загружает несколько изображений (иногда несколько сотен), каждое из которых будет иметь собственный экземпляр одного и того же списка терминов автозаполнения. Результирующий JavaScript выглядит следующим образом в конечном HTML-файле:

<script>
$('#tags_0001').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
$('#tags_0002').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
$('#tags_0003').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
</script>

Теперь рассмотрим, что этот пример усекает этот список "autoCompleteSource". На самом деле, он проходит более 1000 терминов (для каждого экземпляра), в результате чего количество символов HTML превышает 19-20 миллионов!

Похоже, что для jQuery было бы идеальной ситуацией ссылаться на массив этих терминов (или переменную строку), но я действительно не уверен, что HTML поддерживает это.

Я удивлен, что не вижу много об этом в Интернете. Я надеюсь, что это просто мое отсутствие лексикона JS для плохих поисков, а не просто отсутствие решения.

Я уверен, что здесь уже сталкивались другие - какой альтернативный метод я должен использовать в этой ситуации?

Пожалуйста, дайте мне знать, если я опускаю важную диагностическую информацию.

Заранее благодарю.

Answer 1

Хотя я считаю, что ответ Йонаса превосходит этот, я хотел опубликовать альтернативное решение, которое оказалось очень полезным для другого проекта, в котором применение базы данных было непрактичным.

Источник принятого ответа на этот SO вопрос:

как скрыть все div в jquery

Вместо этого он фокусируется на элементе textarea, а не на div, но приложение то же самое. Это textarea, на котором мы сосредоточены.

Новый код, который заменит код в моем исходном вопросе:

<script>
$('textarea[id^=\"tags_\"]').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
</script>

Вот и все. Всего одна строчка. Проверено и работает.

Answer 2

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

Слова для Google: AJAX и fetch().