[英]Search an XML file and display results with javascript
最近3个小时,我一直在各处搜索,但找不到任何可以帮助我的东西。 非常抱歉,如果有任何答案,但我无法解决。
所以我有这个xml文件,例如:
<entry>
<title>The Title</title>
<description>Description here</description>
</entry>
因此,我想做的是在其中包含一个带有搜索表单的html,然后根据搜索词显示与该词匹配的同一页面(例如空div)中的所有结果。
这可能吗?
在此先感谢任何可以帮助我的人!
我对此很好奇,但没有人回答,所以我尝试了一些事情,并找出了使用jQuery的最佳简便方法
的test.xml
<item>
<entry>
<title>The Title</title>
<description>Description here</description>
</entry>
<entry>
<title>The Title 2 </title>
<description>Description here second</description>
</entry>
</item>
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="search" autocomplete="off" />
<p id="output"></p>
<script type="text/javascript">
$(document).ready(function(){
$('#search').on('keyup', function(){
$.ajax({
type: "GET",
url: "test.xml",
dataType: "xml",
success: parseXML
});
});
});
function parseXML(xml){
var searchFor = $('#search').val();
var reg = new RegExp(searchFor, "i");
$(xml).find('entry').each(function(){
var title = $(this).find('title').text();
var titleSearch = title.search(reg);
var desc = $(this).find('description').text();
var descSearch = desc.search(reg);
$('#output').empty();
if(titleSearch > -1){
$('#output').append('Found <i>'+searchFor+'<\/i> in title: '+title.replace(reg, '<b>'+searchFor+'</b>')+'<br \/>');
}
if(descSearch > -1){
$('#output').append('Found <i>'+searchFor+'<\/i> in description: '+desc.replace(reg, '<b>'+searchFor+'</b>')+'<br \/>');
}
});
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.