Question

我尝试使用＆＃39;关键字＆＃39;来尝试搜索基于本地的XML，目标是使用jQuery将结果返回到屏幕。

例如，如果我要搜索＆＃39; iPhone 7＆＃39;在XML中，屏幕上显示的结果将是iPhone 7的描述。

我已经使用Bootstrap创建了一个搜索栏。

对此已经困惑了很长一段时间，所以任何帮助都会受到赞赏。

jQuery

HTML

<form action="" class="search-form">
      <div class="form-group has-feedback">
        <label for="search" class="sr-only">Search</label>
        <input type="text" class="form-control" name="search" id="search" placeholder="Search for current topics, e.g., iPhone"><span class="glyphicon glyphicon-search form-control-feedback"></span>
        <div id="search_output"></div>
      </div>

的jQuery

 $(document).ready(function(){
    $('#search').on('keyup', function(){
        $.ajax({
            type: "GET",
            url: "iphones.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);
        $('#search_output').empty();
        if(titleSearch > -1){
            $('#search_output').append('Found <i>'+searchFor+'<\/i> in title: '+title.replace(reg, '<b>'+searchFor+'</b>')+'<br \/>');
        }
        if(descSearch > -1){
            $('#search_output').append('Found <i>'+searchFor+'<\/i> in description: '+desc.replace(reg, '<b>'+searchFor+'</b>')+'<br \/>');
        }
    });    
}

XML

    <rss version="2.0">
<channel>
    <title> iPhone Reviews </title>
    <description> Review of iPhones </description>
    <language>en-gb</language>
            <item>
                <title> iPhone 7 </title>
                <description> iPhone 7 released in 2016 </description>
            </item>
            <item>
                <title> iPhone 8 </title>        
                <description> iPhone 8 released in 2017 </description>
            </item>
            <item>
                <title> iPhone X</title>      
                <description> iPhone X released in 2017</description>
            </item>
    </channel>
</rss>

我已将#search_output的元素标识为我希望显示搜索结果的位置，但在此阶段没有任何内容出现，并且屏幕只是刷新。

搜索XML文件并使用jQuery返回结果

0 个答案: