jQuery. html () не отображается весь контент

Question

Я подключаюсь к базе данных для получения данных через ajax / JSON. Данные записываются в массив с ключом Javascript. Результат отображается в контейнере с текстовым полем внизу над ним.

I l oop через массив найти подходящие элементы и добавить их в переменную "HTML" в виде строки с тремя ячейками в строке - после завершения l oop Я отображаю «HTML» в контейнере.

Все работает отлично, когда тип поля downfield пуст, весь массив отображается правильно, строки с ячейками.

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

Я действительно не уверен, что мне не хватает в этом.

function dputracks_list_typedown(){

//clear display container by letting user know we are limiting it
$('#dputracks_list_dg').text("type down called..."); 

//empty var to add results of loop to
var theHTML = "";

//get text from search field and make lower case
var ttxt = $.trim($('#dputracks_list_typedown_txt').text()).toLowerCase(); 

//start a loop through the tracks_arr
for(i=0;i<tracks_arr.length;i++){

//in tracks_arr get same number of characters as search field 
//and make lower case so we can check for an exact match  
var atxt = $.trim(tracks_arr[i]'traname'].substring(0,ttxt.length)).toLowerCase();

// if we have a match then add the match in tracks_arr to the html we want
//to display in the container one <div row> with 3 <div cells> inside
if(ttxt == atxt){
theHTML += '<div class="dg_row">';
theHTML += '<div class="dg_cell"><b>'+tracks_arr[i]['traname']+'</b></div>';
theHTML += '<div class="dg_cell">'+tracks_arr[i]['trastate']+'</div>';
theHTML += '<div class="dg_cell">'+tracks_arr[i]['trvisits']+'</div>';
theHTML += '</div>';

//end of loop and if
};};

//if there are matches "theHTML" length will be greater than 10
//display result or tell user there was not a match
if(theHTML.length > 10){
$('#dputracks_list_dg').html(theHTML);
}else{
$('#dputracks_list_dg').text("No tracks returned");
};

//end of function
};

//keyup on search field to trigger search
$('#dputracks_list_typedown_txt').keyup(function(){dputracks_list_typedown();});

, если я наберу "00 -" в текстовом поле ввода вниз, "HTML" станет:

<div class="dg_row">
<div class="dg_cell"><b>00 - Use New</b></div>
<div class="dg_cell">Aa</div>
<div class="dg_cell">&amp;</div>
</div>
<div class="dg_row">
<div class="dg_cell"><b>00 - Use New</b></div>
<div class="dg_cell">Aa</div>
<div class="dg_cell">&amp;</div>
</div>
<div class="dg_row">
<div class="dg_cell"><b>00 - Use New</b></div>
<div class="dg_cell">Aa</div>
<div class="dg_cell">&amp;</div>
</div>
<div class="dg_row">
<div class="dg_cell"><b>00 - Use New</b></div>
<div class="dg_cell">Aa</div>
<div class="dg_cell">&amp;</div>
</div>
<div class="dg_row">
<div class="dg_cell"><b>00 - Use New</b></div>
<div class="dg_cell">Aa</div>
<div class="dg_cell">&amp;</div>
</div>
<div class="dg_row">
<div class="dg_cell"><b>00 - Use New</b></div>
<div class="dg_cell">Aa</div>
<div class="dg_cell">&amp;</div>
</div>

Но отображается следующее:

<div class="dg_row"></div>
<div class="dg_row"></div>
<div class="dg_row"></div>
<div class="dg_row"></div>
<div class="dg_row"></div>
<div class="dg_row"></div>

Заблокируйте поле поиска без символов, и весь список будет отображаться правильно. Строки с ячейками и текстом все там.

Спасибо за любую помощь!

Answer 1

Кажется, проблема в том, что если div контейнера имеет минимальную высоту, а содержимое, динамически загружаемое в этот контейнер, не заполняет его Chrome решает не отображать загруженное содержимое, ошибка в консоли:

[Устаревание] Синхронный запрос XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя.

Простое исправление - не устанавливать минимальную высоту для div, который будет получать новое динамическое содержимое c. Он должен быть внутри другого div, который имеет минимальную высоту.