Question

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

Answer 1

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

＆＃13;

$(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");
    }
  });
});

＆＃13;

div#output_result {
  border: solid 1px black;
  width: 500px;
  padding: 30px;
  background: lightgray;
}

＆＃13;

<!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>

＆＃13;

Answer 2

＆＃13;

$(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");
		}
	});
});

＆＃13;

div#output_result {
    border: solid 1px black;
    width: 500px;
    padding: 30px;
	background: lightgray;
}

＆＃13;

<!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>

＆＃13;

Jquery即时搜索和显示链接

2 个答案: