0

我尝试在向用户显示与搜索输入字段值相关的所有锚链接的页面上进行即时搜索。该代码可以很好地接受以 a 开头的链接数量。我的代码只输出一个带有 a 的链接，而不是所有以 a 开头的链接。我希望有一个人可以帮助我。

附上我的 HTML/jquery 代码

$(document).ready(function(){
	$("#output_result").css("display", "none"); 
	$("#output_result").val("");  
	$('#search').keyup(function(){
		$("#output_result").css("display", "block"); 
		var searchedText = $(this).val(); 
		var result = $("td.myClass:contains('"+searchedText+"')").html(); 

		$("#output_result").html(result);
		console.log(result);

		if( $(this).val().length === 0){
			$("#output_result").css("display", "none");
			$("#output_result").val("");
		}else {
			$("#output_result").css("display", "block");
		}
	});
});
div#output_result {
    border: solid 1px black;
    width: 500px;
    padding: 30px;
	background: lightgray;
}
<!DOCTYPE html>
<html>
	<head>
		<title>MySearch</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	</head>
	
	<body>
		<input type="text" id="search" placeholder="suche nach Standard"/>
		<div id="output_result"></div>
		<br/>
		<table>
			<tr>
			<td class="myClass"><a href="custom_link_1" target="_blank">apple</a></td>
			</tr>
			<tr>
				<td class="myClass"><a href="custom_link_2" target="_blank">ananas</a></td>
			</tr>
			<tr>
				<td class="myClass"><a href="custom_link_3" target="_blank">anchovi</a></td>
			</tr>

			<tr><td class="myClass"><a href="custom_link_4" target="_blank">banana</a></td></tr>
		</table>
	</body>

</html>

4

2 回答 2

1

您的行将$("td.myClass:contains('"+searchedText+"')").html()仅返回第一个匹配项（如 .html() 的文档状态：“获取匹配元素集中第一个元素的 HTML 内容”）。您需要先获取匹配元素的集合，而不需要该html()部分，然后循环遍历结果，例如：

$(document).ready(function() {
  $("#output_result").css("display", "none");
  $("#output_result").val("");
  $('#search').keyup(function() {
    $("#output_result").css("display", "block");
    var searchedText = $(this).val();
    var result = $("td.myClass:contains('" + searchedText + "')");
    var output='';
    for (var i = 0; i < result.length; i++) {
      output += $(result).eq(i).html()+'<br>';
    }
    $("#output_result").html(output);
    if ($(this).val().length === 0) {
      $("#output_result").css("display", "none");
      $("#output_result").val("");
    } else {
      $("#output_result").css("display", "block");
    }
  });
});
div#output_result {
  border: solid 1px black;
  width: 500px;
  padding: 30px;
  background: lightgray;
}
<!DOCTYPE html>
<html>

<head>
  <title>MySearch</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" id="search" placeholder="suche nach Standard" />
  <div id="output_result"></div>
  <br/>
  <table>
    <tr>
      <td class="myClass"><a href="custom_link_1" target="_blank">apple</a></td>
    </tr>
    <tr>
      <td class="myClass"><a href="custom_link_2" target="_blank">ananas</a></td>
    </tr>
    <tr>
      <td class="myClass"><a href="custom_link_3" target="_blank">anchovi</a></td>
    </tr>

    <tr>
      <td class="myClass"><a href="custom_link_4" target="_blank">banana</a></td>
    </tr>
  </table>
</body>

</html>

于 2017-03-21T19:41:29.187 回答
0 

$(document).ready(function(){
	$("#output_result").css("display", "none"); 
	$("#output_result").val("");  
	$('#search').keyup(function(){
		$("#output_result").css("display", "block"); 
		var searchedText = $(this).val();
    //insert a collection of result, if you call html function, it will only return the first one.
		var result = $("td.myClass:contains('"+searchedText+"')"); 
    //you should have a class for new link, here just for demo purpose 
    result.css({"display":"block"});
		$("#output_result").html(result);

		if( $(this).val().length === 0){
			$("#output_result").css("display", "none");
			$("#output_result").val("");
		}else {
			$("#output_result").css("display", "block");
		}
	});
});
div#output_result {
    border: solid 1px black;
    width: 500px;
    padding: 30px;
	background: lightgray;
}
<!DOCTYPE html>
<html>
	<head>
		<title>MySearch</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	</head>
	
	<body>
		<input type="text" id="search" placeholder="suche nach Standard"/>
		<div id="output_result"></div>
		<br/>
		<table>
			<tr>
			<td class="myClass"><a href="custom_link_1" target="_blank">apple</a></td>
			</tr>
			<tr>
				<td class="myClass"><a href="custom_link_2" target="_blank">ananas</a></td>
			</tr>
			<tr>
				<td class="myClass"><a href="custom_link_3" target="_blank">anchovi</a></td>
			</tr>

			<tr><td class="myClass"><a href="custom_link_4" target="_blank">banana</a></td></tr>
		</table>
	</body>

</html>

于 2017-03-21T19:46:45.913 回答