Question

尝试添加搜索功能时，我遇到了问题，showList（）。

似乎很难让客户陷入困境，以至于Chrome每次输入输入字段时都想要杀死页面。我显然是一个新手JS作家，所以我可以在某个我无法看到的地方运行无限循环吗？此外，任何建议，以使搜索功能正常工作将非常感激。我不认为我使用下面的正确选择器来显示/隐藏if语句，但我无法想出还有什么可以使用。

＆＃13;

$(document).ready(function(){

    showList();
    searchBar();
   
});

function showList() {
	 $("#show-records").click(function(){
		$.getJSON("data.json", function(data){
		    var json = data;
		    $("show-list").append("<table class='specialists'>")
		    for(var i = 0; i < json.length; i++) {
			    var obj = json[i],
			    	tableFormat = "</td><td>";
				
			    $("#show-list").append("<tr><td class=1>" + 
			    	obj.FIELD1 + tableFormat + 
			    	obj.FIELD2 + tableFormat + 
			    	obj.FIELD3 + tableFormat + 
			    	obj.FIELD4 + tableFormat + 
			    	obj.FIELD5 + tableFormat + 
			    	obj.FIELD6 + tableFormat + 
			    	obj.FIELD7 + tableFormat + 
			    	obj.FIELD8 + "</td></tr>");
				$("show-list").append("</table>");
			}
			//end getJSON inner function
		});
		//end click function
    });
	 //end showList()
};



function searchBar() {

	//AJAX getJSON
	$.getJSON("data.json", function(data){
		//gathering json Data, sticking it into var json
		var json = data;
		for(var i = 0; i < json.length; i++) {
			//putting the json objects into var obj
			var obj = json[i];
			function contains(text_one, text_two) {
				if (text_one.indexOf(text_two) != -1)
					return true;
			}
			//whenever anything is entered into search bar...
			$('#search').keyup(function(obj) {
				//grab the search bar content values and...
				var searchEntry = $(this).val().toLowerCase();
				//grab each td and check to see if it contains the same contents as var searchEntry - if they dont match, hide; otherwise show
				$("td").each(function() {
					if (!contains($(this).text().toLowerCase(), searchEntry)) {
						$(this).hide(400);
					} else {
						$(this).show(400);
					};
    			})
    		})
		}
	});
};

＆＃13;

body {
	background-color: lightblue;
}
tr:first-child {
	font-weight: bold;
}
td {
	padding: 3px;
	/*margin: 10px;*/
	text-align: center;
}
td:nth-child(6) {

	padding-left: 50px;
}
td:nth-child(7) {
	padding-left: 10px;
	padding-right: 10px;
}
#filter-count {
	font-size: 12px;
}

＆＃13;

<html>
	<head>
		<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script language="javascript" src="process.js"></script>
		<link rel="stylesheet" type="text/css" href="./mystyle.css">
	</head>
	<body>

		<a href="#" id='show-records'>Show Records</a><br>
		<label id="searchBar">Search: <input id="search" placeholder="Enter Specialist Name"></label>
		<span id="search-count"></span>
		<div id="show-list"></div>
	</body>
</html>

＆＃13;

Answer 1

问题似乎是您不能将append视为文本编辑器并且您正在编写html。

任何插入的东西都需要是一个合适的元素......不是开始标记，而是一些文本......然后是一个关闭标记。

然而，我们可以稍微修改您的代码以生成html字符串，然后在末尾添加

  $.getJSON("data.json", function(data){
        var json = data;
        var html="<table class='specialists'>")
        for(var i = 0; i < json.length; i++) {
            var obj = json[i],
                tableFormat = "</td><td>";

            html+= "<tr><td class=1>" + 
                obj.FIELD1 + tableFormat + 
                obj.FIELD2 + tableFormat + 
                obj.FIELD3 + tableFormat + 
                obj.FIELD4 + tableFormat + 
                obj.FIELD5 + tableFormat + 
                obj.FIELD6 + tableFormat + 
                obj.FIELD7 + tableFormat + 
                obj.FIELD8 + "</td></tr>";

        }

         html+= '</table>';
        $("#show-list").html(html);
        //end getJSON inner function
    });

getJSON JSON数组 - 搜索功能崩溃客户端

1 个答案: