jQuery .html() 不显示所有内容

Question

我正在连接到数据库以通过 ajax/JSON 检索数据。数据写入 Javascript 键控数组。结果显示在一个容器中，其上方有一个向下键入的文本字段。

我循环遍历数组，找到匹配的项目，并将它们作为一行添加到变量“theHTML”中，行中包含三个单元格 - 循环完成后，我会在容器中显示“theHTML”。

当类型下字段为空时，一切正常，整个数组正确显示带有单元格的行。

一旦在向下键入文本字段中键入一个字符，显示屏将仅显示行，而不显示行中的单元格内容。

我真的不确定我错过了什么。

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 -”，“theHTML”将变为:

<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 的最小高度。它必须位于另一个具有最小高度的 div 内。