Question

我使用PHP创建了一个HTML页面，它编译了一个数据点列表并将它们推送到一个数组中，在头文件中声明了数组，并且回显了一个庞大的表单输入对象列表。我正在使用的列表不到15,000行，这些行被放入1个数组中。

我或多或少创建了一个搜索框，当我模糊（）一个动作应该发生时，Javascript函数应该搜索数组并隐藏不匹配的表单选项并显示匹配。这似乎可以很好地工作到5000但是如果我让它运行所有15000个数组项目它会挂起并冻结。

我正在测试时在免费网站上托管它...这里是指向实际页面的链接TEST PAGE that hangs up

我在JS代码片段中包含一个截断数组，因此您无需滚动数千行。

		<script type="text/javascript" >
			
			var array_ICDDx = new Array('[ICD Code] Diagnosis','[001.0] Cholera due to vibrio cholerae','[001.1] Cholera due to vibrio cholerae el tor','[001.9] Cholera, unspecified','[002.0] Typhoid fever','[002.1] Paratyphoid fever A','[002.2] Paratyphoid fever B','[002.3] Paratyphoid fever C','[002.9] Paratyphoid fever, unspecified','[003.0] Salmonella gastroenteritis','[003.1] Salmonella septicemia','[003.20] Localized salmonella infection, unspecified','[003.21] Salmonella meningitis','[003.22] Salmonella pneumonia','[003.23] Salmonella arthritis','[003.24] Salmonella osteomyelitis',[...GOES ON FOREVER ~15000 ARRAY VALUES...]);
			
			function searchICDDx(ICDDx,line_start,line_end) {
				for (var a = line_start; a < line_end; a++) {
					var ICDDx_check = array_ICDDx[a].toLowerCase();
					var Row = "R" + a;
					if (ICDDx_check.search(ICDDx) >= 0) {
						document.getElementById(Row).style.display = "block";
					}
					else {
						document.getElementById(Row).style.display = "none";
					}
				}
				if (line_end < array_ICDDx.length) {
					line_end += 1000;
					if (line_end > array_ICDDx.length) { line_end = array_ICDDx.length; }
					var timer = setTimeout(searchICDDx(ICDDx,a,line_end),100);
//					searchICDDx(ICDDx,a,line_end);
				}
//				else if (line_end >= array_ICDDx.length) {
//					clearTimeout(timer);
					return;
//				}
			}
			
			function searchICD() {
				var find_ICD = Coder.elements['ICD'].value;
				if (find_ICD != "") {
					document.Coder.Dx.value = "";
					find_ICD = find_ICD.toLowerCase();
					searchICDDx(find_ICD,1,1000);
				}
			}

			function searchDx() {
				var find_Dx = Coder.elements['Dx'].value;
				if (find_Dx != "") {
					document.Coder.ICD.value = "";
					find_Dx = find_Dx.toLowerCase();
					searchICDDx(find_Dx,1,1000);
				}
			}
			
		</script>

代码无法运行似乎不是问题。正如我所提到的，如果我将搜索限制为仅1000个数组值，它似乎可以正常工作，它会杀死页面的大量数组值。

有什么建议吗？提前谢谢！

Answer 1

有了这么多数据点，您应该在服务器上执行此操作。但是，您可以尝试以下方法：

而不是使用for循环（完全冻结浏览器直到完成），使用setInterval每5 ms左右检查一次新结果。定期检查是否已搜索到所有结果，如果是，则清除间隔。搜索仍需要一些时间，但不会冻结浏览器。
搜索，直到您有一组结果（大约40个），并存储搜索到的数组的最后一个索引。等待加载更多搜索，直到用户向下滚动页面。

此外，您应该实现无限滚动以显示结果。我的浏览器冻结了，只需打开你附加的链接就必须重新启动。

更新：如果您不希望在搜索之前显示这些项目，则您最初应该没有项目，并在匹配搜索时添加它们。这可以防止初始延迟，防止您必须更改每个元素的可见性，并减少页面上元素的数量（这会导致问题）。

Answer 2

感谢您的所有意见和建议。

我回去并在表单中列出所有条目。然后我让JS根据所有正面结果和element.innerHTML结果创建一个复选框输入列表。该数组仍然是客户端的巨大列表，JS通过该列表搜索匹配项。我更新了原始帖子中链接中的代码，以显示更快更好的工作结果。

		<script type="text/javascript" >
			
			var array_ICDDx = new Array('[icd code] diagnosis','[001.0] cholera due to vibrio cholerae','[001.1] cholera due to vibrio cholerae el tor','[001.9] cholera, unspecified','[002.0] typhoid fever','[002.1] paratyphoid fever a',[...etc...]);
			
			function searchICDDx(array_Results,ICDDx,line_start,line_end) {
				for (var a = line_start; a < line_end; a++) {
					if (array_ICDDx[a].indexOf(ICDDx) >= 0) {
						array_Results.push("<span style='display:block' ><input type='checkbox' value='"+array_ICDDx[a]+"' >"+array_ICDDx[a]+"</span>");
					}
				}
				if (line_end < array_ICDDx.length) {
					line_end += 1000;
					if (line_end > array_ICDDx.length) { line_end = array_ICDDx.length; }
					searchICDDx(array_Results,ICDDx,a,line_end);
				}
				else if (line_end >= array_ICDDx.length) {
					var string_Results = array_Results.join("\n");
					document.getElementById("Results_here").innerHTML = string_Results;
					return;
				}
			}
			
			function searchICD() {
				var array_Results = new Array();
				var find_ICD = Coder.elements['ICD'].value;
				if (find_ICD != "") {
					document.Coder.Dx.value = "";
					find_ICD = find_ICD.toLowerCase();
					searchICDDx(array_Results,find_ICD,1,1000);
				}
			}

			function searchDx() {
				var array_Results = new Array();
				var find_Dx = Coder.elements['Dx'].value;
				if (find_Dx != "") {
					document.Coder.ICD.value = "";
					find_Dx = find_Dx.toLowerCase();
					searchICDDx(array_Results,find_Dx,1,1000);
				}
			}
			
		</script>

过去我在表单和innerHTML添加选项方面效果不佳，当我尝试将此代码移动到更大的项目中时，我将再次解决这个问题。

再次感谢您

页面挂起，搜索太多了

2 个答案: