Как добавить значок `loading ...` в виджет автозаполнения jQuery UI

Question

Я пытаюсь изменить jQuery's autocomplete widget, чтобы изменить цвет фона ввода, пока скрипт ищет предложения. Вот моя попытка (или посмотреть на my attempt on jsfiddle):

HTML

<label for="numbers">Numbers: </label> 
<input id="numbers" /> 

Javascript

var numbers = [], 
    nb = 10000, 
    i; 

for (i = 0; i < nb; i += 1) { 
    numbers.push(i.toString()); 
} 

function color (color) { 
    $('#numbers').css({ 
     background: color 
    }); 
} 

$("#numbers").autocomplete({ 
    source: numbers, 
    search: function (event, ui) { 
     console.log('search event fired'); 
     color("red"); 
    }, 
    open: function (event, ui) { 
     console.log('open event fired'); 
     color("green"); 
    }, 
    close: function (event, ui) { 
     console.log('close event fired'); 
     color("white"); 
    } 
}); 

Как вы можете видеть, я протоколирование search, open и close событий, поэтому я могу видеть, когда их увольняют.

Как и следовало ожидать, набрав в 5 (существующее значение) запускает search событие и регистрирует соответствующее сообщение, и, спустя несколько секунд, срабатывает open событие и регистрирует его соответствующее сообщение. Поскольку я помещаю 10000 записей, есть заметная задержка между событием search и событием open (что-то вроде 1 секунды).

Что меня беспокоит, когда появляется сообщение журнала, связанное с событием search, оно не сопровождается изменением цвета фона на красный, как и следовало ожидать. Вместо этого он остается белым до тех пор, пока не произойдет событие open, затем станет зеленым (как ожидается после открытого события). Если, однако, я набираю a (несуществующее значение), цвет фона становится красным без проблем (обратите внимание, что событие open никогда не происходит в этом случае, потому что не найдено соответствующего значения). Что тут происходит?

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

UPDATE

Я сделал another attempt, который показывает, что инструкция, следующая console.log действительно называется, но визуальные эффекты появляются гораздо позже. Вот код, я использую:

$("#numbers").autocomplete({ 
    source: numbers, 
    search: function (event, ui) { 
     console.log('search event fired'); 
     $('#numbers').css({ 
      marginTop: "5em" 
     }); 
     console.log('search callback done'); 
    } 
}); 

Если вы попробуете это, вы увидите, что оба сообщения регистрируются до поля вытесняются добавлением верхнего края. Каким-то образом маржа добавляется в нужное время, но страница не перерисовывается в нужное время ...

Answer 1

Итак, вы пробовали это?

$("#numbers").autocomplete({ 
    source: numbers, 
    search: function (event, ui) { 
     console.log('search event fired'); 
     $(this).addClass('working'); 
    }, 
    open: function (event, ui) { 
     console.log('open event fired'); 
     color("green"); 
    }, 
    close: function (event, ui) { 
     console.log('close event fired'); 
     color("white"); 
    } 
}); 

Это должно добавить класс в текстовое поле. Просто добавьте стиль CSS, называемый «работающим» с фоновым свойством красного цвета.

Реф. jQuery autocomplete: How to show an animated gif loading image

Answer 2

Короткий ответ: это не ваша вина :) То, что происходит, является то, что картина из браузеров в основном застопорился из-автозаполнения плагин является extemely медленно.

Чтобы определить, как медленно и почему это происходит медленно, вы можете использовать вкладку хронологии Chrome Devtool.В то время как в покадровом режиме, нажмите запись, чтобы увидеть график, как это:

Вы увидите желтые полосы (скрипты) идите выше очертаний бара, как только вы начинаете вводить входные данные. Это означает, что операции не могут быть завершены вовремя, что приведет к остановке браузера. Вы можете просмотреть stacktrace, чтобы определить, какие строки действительно медленны. Однако проблема может быть исправлена, но для этого потребуются довольно некоторые знания о внутренних функциях jquery-ui.

При работе с этим множеством вариантов сценариев интерфейса может быть недостаточно. Вы можете посмотреть на серверный поиск с интерфейсом ajax, чтобы тяжелый подъем выполнялся сервером.