【问题标题】:Jquery XML Search and display results with specific user input criteriaJquery XML 搜索并显示具有特定用户输入条件的结果
【发布时间】:2013-12-03 06:44:49
【问题描述】:

我一直在寻找和尝试新事物,但没有一个对我有用。

场景:用户有一个用于搜索文件的搜索表单,其中有多个复选框、单选框、输入字段。

现在,用户可以选择搜索条件,即按文件类型(pdf、doc、图像、关键字......等)或关键字(元数据)或/和文件标题搜索。

数据源是xml。

我正在使用 ajax、regExp 来匹配。但不知道需要什么才能获得正确的结果并显示它们。请问:

1.这种方法适用于有大量数据的地方(包含超过 10,000 个条目的大型 xml)。

2。获得正确结果并显示它们需要什么。

到目前为止我已经到达,现在我被卡住了......

提前谢谢....

HTML

<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

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

JS[更新]

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

    }
    }
        });

    });
   }
    });

【问题讨论】:

    标签: javascript jquery xml regex search


    【解决方案1】:

    几个问题:

    • 您的脚本有语法错误,请使用 Firebug 或 IE 开发工具检查并修复它们。

    • 我认为您没有按预期使用 Find。 Find 将“获取当前匹配元素集中每个元素的后代,由选择器、jQuery 对象或元素过滤”。

    • 您可能需要考虑以下解决方案:

    -> 根据用户选择过滤文件名或关键字元素(使用查找)

    -> while 循环匹配搜索关键字的元素文本值

    -> 将匹配项添加到数组中

    -> 遍历数组并将结果显示给用户

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-09-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-31
      相关资源
      最近更新 更多