Question

我想从单独的页面搜索多个HTML文件，在那里我搜索所有div的文本，每个div都有一个特定的id，包含匹配搜索词的整个id将显示在列表中的搜索页面上。

div列表如下所示：

<body>
    <div class='vs'>
        <div id='header 1'>content 1 here </div>
        <div id='header 2'>another text  </div>
        <div id='header 3'>whatever </div>
    </div>
</body>

请注意，我想从不同的页面执行搜索，并希望在那里显示带有可搜索页面链接的结果。

现在我这样搜索：

HTML

<body> 
    <input type="text" id='search' />
    <div class='vs'>
        <div id='header 1'>content 1 here </div>
        <div id='header 2'>another text  </div>
        <div id='header 3'>whatever </div>
    </div>   
</body>

的JavaScript

$('#search').on('input', function () {
    var text = $(this).val();
    $('.vs div').show();    
    $('.vs div:not(:contains(' + text + '))').hide();
});

它正在使用fiddle here，但我不希望它像这样工作，我想远程从单独的页面进行搜索，并在那里显示带有此页面链接的结果。

Answer 1

您需要查看使用PHP file_get_contents检索外部页面的HTML内容，然后分析您感兴趣的<div>中的数据。最后，您我希望将每个单独的搜索词存储在JavaScript数组中（您可以使用PHP动态创建JavaScript数组），然后创建类似于您发布的示例的搜索功能，以搜索数组中的所有元素。

因此，在页面加载时，您将需要一个<div>，其中您将列出数组中的所有元素。您可以通过循环遍历数组并显示每个单独的元素来列出这些。从那里开始，每次用户输入或删除<input>框中的字符时，您都希望调用一个函数。此函数将使用与<div>框中的字符串匹配的更新元素列表更新<input>。

这是你想要实现的理论背后的理论。希望它能为您提供如何编写代码的方向。

<强>更新

如果您正在寻找仅限JavaScript的解决方案，请查看PHP的等效PHP file_get_contents：http://phpjs.org/functions/file_get_contents/

从这里开始，您可以查看使用.split来分解列表。最终，您仍然试图将每个单独的搜索词存储为数组中的元素，它只是检索这些词的方法不同（JavaScript而不是PHP）。

也许我过分强调PHP，也许是因为它是我最熟悉的网络开发语言。希望这个仅限JavaScript的解决方案很有帮助。

Answer 2

使用jQuery和AJAX解决方案：

<form id="searchForm">
    <input type="text" id="search"/>
    <input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
    $("#searchForm").submit(function(e) {
        e.preventDefault();
        var results = $("#resultContainer");
        var text = $("#search").val();
        results.empty();
        $.get("http://example.com/", function(data) {
            results.append($(data).find("div:contains(" + text + ")"));
        });
    });
</script>

Fiddle（这个小提琴让您可以在jsfiddle页面上搜索内容，例如JSFiddle作为搜索词。）

但请注意，这不适用于跨域，因为浏览器会阻止跨站点脚本。你没有详细描述你的用例，让我知道你是否对此感到满意。

搜索html div并在不同页面上显示结果

2 个答案: