jquery搜索并立即显示链接答案

【问题标题】：Jquery search and display link instantlyjquery搜索并立即显示链接
【发布时间】：2017-03-21 19:33:53
【问题描述】：

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

【问题讨论】：

标签： jquery search instant

【解决方案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>

【讨论】：

非常感谢。我也用循环尝试过，但总是出错。 “您需要先获取匹配元素的集合而不使用 html() 部分然后循环遍历结果”的提示非常有用。现在它工作正常。非常感谢您的帮助
我能再问一个问题吗？结果取决于关键字的第一个字母。是否可以更改代码，这样无论单词是大写还是小写都无关紧要？对不起，我忘了在我的第一篇文章中提出问题提前谢谢
好吧，:contains 区分大小写，所以这意味着您需要找到另一种方法来进行搜索。 JavaScript 有 toLowerCase() 和 toUpperCase() 将字符串转换为小写或大写，但这只是解决方案的一部分。
如果有人需要“解决方法”，这里的代码可以让我使用 .contains insesitive stackoverflow.com/questions/8746882/… jQuery.expr[':'].contains = function(a, i, m) { 返回 jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; };

【解决方案2】：

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

【讨论】：