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

【问题标题】：search html div and display results on different page搜索 html div 并在不同页面上显示结果
【发布时间】：2013-12-15 06:25:51
【问题描述】：

我想从一个单独的页面搜索多个 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 上工作，但我不希望它像这样工作，我想从一个单独的页面远程进行搜索，并在那里显示结果以及指向该页面的链接。

【问题讨论】：

您的问题到底是什么？你采取了哪些步骤来实现你的目标？您发布的 HTML 标记没有任何帮助。
您在 6 小时前发布了完全相同的问题：search from a different html page div's and display results
我想从 html 页面搜索并列出 div 与匹配的搜索词，它是 html 中的电子书，实际上 div id 用于 html 电子书中的书签目的
我没有收到上一个问题的回复
您没有得到回复的原因是因为您没有表明您已经付出了任何努力来尝试自己解决这个问题。您发布的代码是不相关的，它让人们觉得您只是要求提供代码。这也是为什么你得到这么多反对票的原因。

标签： javascript jquery html search

【解决方案1】：

使用 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（这个fiddle可以让你在jsfiddle页面上搜索内容，例如JSFiddle作为搜索词。）

但是请注意，这不适用于跨域，因为浏览器会阻止跨站点脚本。你没有把你的用例描述得足够清楚，我不知道你是否同意。

【讨论】：

当然。不要仅仅附加已找到的divs，而是在它们上使用.each()，并在将其附加到结果之前将链接添加到每个链接。您可以通过.attr("id")获取创建链接的id。
我必须从大约 6000 个 div 中搜索，所以手动添加链接会很痛苦，我可以通过 javascript 端做到这一点
我的说明是关于使用 JavaScript 执行此操作的。请尝试自己实现它 - StackOverflow 可以帮助您解决遇到的问题，我们不会只为您实现东西。
jsfiddle.net/kd6Y4/1 它现在在这里工作，也可以编写超链接，但它不能离线工作，请帮助

【解决方案2】：

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

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

这就是您要实现的目标背后的理论。希望它能给你一些关于如何编写代码的指导。

更新：

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

从这里，您也许可以查看使用.split 来分解列表。最终，您仍在尝试将每个单独的搜索词作为一个元素存储在数组中，只是检索这些词的方法不同（JavaScript 与 PHP 相对）。

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

【讨论】：

我可以不使用 php 做到这一点吗？因为我必须完全离线使用 java-script 和 html 本身没有 php 环境
如果您的计算机上安装了 PHP 的 apache 服务器，并且两个文件都存储在本地，您仍然可以离线执行此操作。只要两个文件都在您的域中，它应该可以使用 JavaScript 实现。看看phpjs.org
是的，这两个文件都在目录中，它不会托管在域中，但将离线存储以供跨多个设备的混合应用程序使用，因此无法实际使用 php 任何想法我应该在哪里挖掘以使用 javascript以及插件推荐？？
正如我之前所说，您可以将其托管在 localhost 上。仅仅因为文件存储在您的本地计算机上并不意味着您仅限于 HTML 和 JavaScript。就像我之前说的，看phpjs.org，但我不明白为什么你不能使用PHP。
因为我还必须在 webview 的混合 android 应用和 ios 应用等中使用相同的文件