Jquery搜索并立即显示链接

我尝试在页面上进行即时搜索，该页面向用户显示与搜索输入字段值相关的所有锚链接。代码工作正常，接受以 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>

您的第 $("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>

$(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>

相关内容

最新更新

热门标签：