Javascript Jquery XML搜索和显示带有特定用户输入条件的结果
我一直在寻找和尝试新的东西，但没有一个适合我 场景：用户有一个用于搜索文件的搜索表单，其中有多个复选框、收音机、输入字段 现在，用户可以选择搜索条件，即按文件类型（pdf、文档、图像、关键字等）或关键字（元数据）或/和文件标题进行搜索 数据源是xml 我使用ajax，regExp来匹配。但是不知道需要什么才能得到正确的结果并显示出来。请问： 1。这种方法适用于存在大量数据（包含10000多个条目的大型xml）的情况。 2。需要什么才能获得正确的结果并显示出来。 我已经到达了很远的地方，现在我被困住了 提前谢谢 HTMLJavascript Jquery XML搜索和显示带有特定用户输入条件的结果,javascript,jquery,xml,regex,search,Javascript,Jquery,Xml,Regex,Search,我一直在寻找和尝试新的东西，但没有一个适合我 场景：用户有一个用于搜索文件的搜索表单，其中有多个复选框、收音机、输入字段 现在，用户可以选择搜索条件，即按文件类型（pdf、文档、图像、关键字等）或关键字（元数据）或/和文件标题进行搜索 数据源是xml 我使用ajax，regExp来匹配。但是不知道需要什么才能得到正确的结果并显示出来。请问： 1。这种方法适用于存在大量数据（包含10000多个条目的大型xml）的情况。 2。需要什么才能获得正确的结果并显示出来。 我已经到达了很远的地方，现在我被困
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>custom search</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/search.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="searchForm">
<div><h1>Search....</h1></div>
<form class="myform">
<div class="radio">
Please select a type of file:
<input type="radio" id="pdf" name="docbox" value="pdf">
<label for="pdf">pdf</label>
<input type="radio" id="doc" name="docbox" value="doc">
<label for="doc">doc</label>
</div><!-- Radio ends-->
<label for="searchbox">Please enter your search here</label>
<input type="text" id="searchterm" name="searchbox" placeholder="search">
<input type="submit" id="go">
<div class="keywordbox">
<label for="keytitle"> Please search by :</label>
<label>
<input type="checkbox" name="keytitle" value="filename" id="filename">
filename</label>
<label>
<input type="checkbox" name="keytitle" value="keywords" id="keywords">
keywords</label>
<br>
</div>
</form><!-- searchForm -->
<div class="timeline">
</div>
</div>
</body>
<?xml version="1.0" encoding="utf-8"?>
<search>
<item>
<filename id="pdf">John</filename>
<keywords>Paul, John, John Paul</keywords>
</item>
<item>
<filename id="doc">George</filename>
<keywords>Goerge, artist, artist george</keywords>
</item>
<item>
<filename id="pdf">Mark</filename>
<keywords>Anthony, Mark, Anthony, Singer</keywords>
</item>
<item>
<filename id="doc">Bryan</filename>
<keywords>Adams, Bryan, Rockstar</keywords>
</item>
<item>
<filename id="pdf">Westlife</filename>
<keywords>Mylove, swear it over, </keywords>
</item>
</search>
自定义搜索
搜索。。。。
请选择一种文件类型：
pdf
医生
请在此处输入您的搜索
请通过以下方式搜索：
文件名
关键词
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>custom search</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/search.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="searchForm">
<div><h1>Search....</h1></div>
<form class="myform">
<div class="radio">
Please select a type of file:
<input type="radio" id="pdf" name="docbox" value="pdf">
<label for="pdf">pdf</label>
<input type="radio" id="doc" name="docbox" value="doc">
<label for="doc">doc</label>
</div><!-- Radio ends-->
<label for="searchbox">Please enter your search here</label>
<input type="text" id="searchterm" name="searchbox" placeholder="search">
<input type="submit" id="go">
<div class="keywordbox">
<label for="keytitle"> Please search by :</label>
<label>
<input type="checkbox" name="keytitle" value="filename" id="filename">
filename</label>
<label>
<input type="checkbox" name="keytitle" value="keywords" id="keywords">
keywords</label>
<br>
</div>
</form><!-- searchForm -->
<div class="timeline">
</div>
</div>
</body>
<?xml version="1.0" encoding="utf-8"?>
<search>
<item>
<filename id="pdf">John</filename>
<keywords>Paul, John, John Paul</keywords>
</item>
<item>
<filename id="doc">George</filename>
<keywords>Goerge, artist, artist george</keywords>
</item>
<item>
<filename id="pdf">Mark</filename>
<keywords>Anthony, Mark, Anthony, Singer</keywords>
</item>
<item>
<filename id="doc">Bryan</filename>
<keywords>Adams, Bryan, Rockstar</keywords>
</item>
<item>
<filename id="pdf">Westlife</filename>
<keywords>Mylove, swear it over, </keywords>
</item>
</search>
约翰
保罗，约翰，约翰，保罗
乔治
Goerge，艺术家，艺术家george
做记号
安东尼，马克，安东尼，歌手
布莱恩
亚当斯，布莱恩，摇滚明星
西城男孩
我的爱，发誓，
$(document).ready(function() {
var filetypearray = []; // Array for storing matched filetypes
var filenamearray = []; // Array for storing matched filenames
var typearray = [];// Array for Selected type results i.e. pdf or doc
var keywordarray = []; // Array for matched keywords
$.ajax({
type: "GET",
url: "search.xml",
dataType: "xml",
success: parseXML,
//error:function(){alert("Error: Something went wrong");}
});
function parseXML(xml){
$('#go').click(function(){
var searchFor = $("input#searchterm").val();
// TextInput for search
var catType = $("input[name=docbox]:checked").val(); // type of radio checked
pdf or doc
var catType2 = $("input[name='keytitle']:checked").val(); // keyword checkbox
var errMsg = '';
$(xml).find('search item').map(function() {
var filename = $(this).find('filename').text();
var filetypetext =
$(this).find('filename').attr('id');
var type = $(this).find('filename').attr('id');
var keyword = $(this).find('keywords').text();
var title = $(this).find('filename').text();
var reg = new RegExp(searchFor, "gi");
//Reg for TextInput for search
var regcattype = new RegExp(catType, "gi");
//Reg for radio checked for search
var regkey = new RegExp(catType2, "gi");
//Reg for keyword checked for search
/////////////////// Condition for text input search only//////////////////////
if($('input#keywords').is(':not(:checked)') &&
$('input#pdf').is(':not(:checked)') && filename == searchFor)
// Checking Input string matched the Filename
{
var filenamesrch = filename.match(reg);
for(i=0; i<filenamesrch.length; i++){
filenamearray.push(filenamesrch);
filetypearray.push(filetypetext);
keywordarray.push(keyword);
}
$('.timeline').html('Found <b>'+filenamearray.length+'</b> results in
Filenames: <i>Filename</i> <b>'+filenamearray+'</b> with type as
<b>'+filetypearray+'</b> and keywords as <b>'+keywordarray+'</b>');
}
else if(($('input#keywords').is(':not(:checked)') && filename != searchFor)){
$('.timeline').html('No results');
}
/////////////////// Condition for Keyword search only //////////////////////////////
else if ($('input#keywords').is(':checked') && keyword == searchFor){
var kewordsrch = keyword.match(reg);
for(j=0; j<kewordsrch.length; j++){
keywordarray.push(kewordsrch);
filetypearray.push(filetypetext);
filenamearray.push(filename);
}
$('.timeline').html('Found <b>'+keywordarray.length+'</b> results in Keywords:
<i>keyword</i> <b>'+keywordarray+'</b> with type as <b>'+filetypearray+'</b> and
Filename as <b>'+filenamearray+'</b>');
}
else if(($('input#keywords').is(':checked') && searchFor == '')){
$('.timeline').html('Please enter a keyword to search');
}
else if(($('input#keywords').is(':checked') && keyword != searchFor)){
$('.timeline').html('No results');
}
/////////////////// Condition for Filetype pdf search only ///////////////////
if(searchFor != ''){
if ($('input#pdf').is(':checked') && filetypetext ==
catType){
if (filename == searchFor){
//$(':text').attr('disabled', true);
var typesrch = filetypetext.match(regcattype);
for(k=0; k<typesrch.length; k++){
typearray.push(typesrch);
keywordarray.push(keyword);
filenamearray.push(filename);
}
}
//alert(resultarray)
$('.timeline').html('Found <b>'+typearray.length+'</b> results in Types:
<i>type</i> <b>'+typearray+'</b> with filename(s) as <b>'+filenamearray+'</b> and
keywords as <b>'+keywordarray+'</b>');
}
/////////////////// Condition for Filetype doc search only /////////////////
else if ($('input#doc').is(':checked') && filetypetext == catType){
if (filename == searchFor){
//$(':text').attr('disabled', true);
var typesrch = filetypetext.match(regcattype);
alert(typesrch.length)
for(k=0; k<typesrch.length; k++){
typearray.push(typesrch);
keywordarray.push(keyword);
filenamearray.push(filename);
}
$('.timeline').html('Found <b>'+typearray.length+'</b>
results in Types: <i>type</i> <b>'+typearray+'</b> with filename(s) as
<b>'+filenamearray+'</b> and keywords as <b>'+keywordarray+'</b>');
}
//alert(resultarray)
}
}
});
});
}
});
$（文档）.ready（函数（）{
var filetypearray=[]；//用于存储匹配文件类型的数组
var filenamearray=[]；//用于存储匹配文件名的数组
var typearray=[]；//所选类型结果的数组，即pdf或doc
var keywordarray=[]；//匹配关键字的数组
$.ajax({
键入：“获取”，
url:“search.xml”，
数据类型：“xml”，
成功：解析XML，
//错误：函数（）
});
函数解析xml（xml）{
$（'#go'）。单击（函数（）{
var searchFor=$（“输入#searchterm”）.val（）；
//用于搜索的文本输入
var catType=$（“输入[name=docbox]：已选中”）.val（）；//已选中收音机类型
pdf或doc
var catType2=$（“输入[name='keytitle']：选中”）.val（）；//关键字复选框
var errMsg=''；
$（xml）.find（'search item'）.map（函数（）{
var filename=$（this.find（'filename'）.text（）；
var filetypetext=
$（this.find（'filename'）.attr（'id'）；
var type=$（this.find（'filename'）.attr（'id'）；
var关键字=$（this）.find（'keywords'）.text（）；
var title=$（this）.find（'filename'）.text（）；
var reg=新的RegExp（搜索“gi”）；
//用于搜索的文本输入的注册表
var regcatype=新的RegExp（catype，“gi”）；
//已检查无线电注册以进行搜索
var regkey=新RegExp（catType2，“gi”）；
//为搜索检查的关键字注册
///////////////////仅用于文本输入搜索的条件//////
如果（$（'input#keywords'）。是（':not（：checked）&&
$（'input#pdf'）。是（“：not（：checked）”&&filename==搜索）
//检查输入字符串是否与文件名匹配
{
var filenamesrch=filename.match（reg）；
对于（i=0；i几个问题：
- 您的脚本有语法错误，请使用Firebug或IE开发工具检查并修复它们
- 我认为您没有按预期使用Find。Find将“获取当前匹配元素集中每个元素的后代，并通过选择器、jQuery对象或元素进行筛选”
你可能想考虑以下的解决方案：
->根据用户选择筛选文件名或关键字元素（使用查找）
->循环时匹配搜索关键字的元素文本值
->将匹配的项添加到数组中
->循环遍历数组并向用户显示结果