Question

我通常不是后端程序员（这就是为什么我能够真正理解编程的东西），但我被要求使用jQuery Mobile开发ios移动应用程序。如果有些善良的人愿意帮助我，我会真的很感激！

我目前正在做一个搜索功能，用户应该键入一个关键字，jquery脚本应该一次搜索60多个url页面（以.aspx编写的页面，只能使用内部网运行）并返回链接包含关键字。当按下链接时，结果应该在应用程序窗口中显示为一个简单的html页面（没有样式或任何东西）。

我目前的思路是：

将多个页面预加载到DOM
在DOM中加载的页面中的内容中搜索关键字
以可点击的网址/静态HTML显示结果

想问一下我的想法是否正确？我看过一些$mobile.loadPage()，.load()，$mobile.changePage()？但不知道如何实现它们/将它们连接在一起。

是否有任何建议我可以如何启动/参考以更有效地提升此搜索功能？

非常感谢你！

Answer 1

在this fiddle中，我将JQM's multipage template和一个关键字查找放在ajax调用的内容中。

由于相同的原始规则（不同/相同域的javascript访问权限），我使用jsfiddles "echo/html"-Simulation进行ajax调用。

<强> HTML

<!-- copied from jqm's multipage template --->
<!-- Start of page: #keywords -->
<div data-role="page" id="keywords">
    <div data-role="header">
            <h1>search URLs via ajax calls</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <form>
            <label for="keywords">keyword(s) (space-separated, can be regexp):</label>
            <input id="keywords" name="keywords" value="jupiter banana content.*green">
        </form>
        <p><a href="#results" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show results</a>

        </p>
        <p>Possible keywords are <i>apple, banana, blue, content, end, fifth, first, for, fourth, green, is, jupiter, mars, one, orange, red, second, the, third, this, three, two, url, venus</i>

        </p>
        <p>No Keywords shows all urls.</p>
        <p>This demo uses <a href="http://doc.jsfiddle.net/use/echo.html" target="_blank">jsFiddle's /echo/html</a>
and simulated content for ajax calls, because this technique only works on either the same domain or needs cross domain allowance for URLs from other domains (see "<a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank">Cross-origin resource sharing</a>").</p>
    </div>
    <!-- /content -->
    <div data-role="footer" data-theme="a">
            <h4>end of page</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of page: #results -->
<div data-role="page" id="results">
    <div data-role="header" data-theme="b">
            <h1>Results</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <div id="resultContainer"></div>
        <p><a href="#keywords" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">close</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>end of page</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page popup -->

<强>的jQuery

// a list of urls on the same domain (here jsfiddle) because of same-origin-rules
// that's why this fiddle contains jsfiddle-ajax-simulation-urls only
var urls = [
    "/echo/html/",
    "/echo/html/",
    "/echo/html/",
    "/echo/html/",
    "/echo/html/"];

// jsfiddle-demo only: this array simulates html content from the urls
// use words from here as keywords
var simulatedDoms = [
    "<p>content for the first url</p><p>apple, banana, orange</p>",
    "<p>content for the second url</p><p>red, green, blue</p>",
    "<p>content for the third url</p><p>mars, venus, jupiter</p>",
    "<p>content for the fourth url</p><p>one, two, three</p>",
    "<p>content for the fifth url</p><p>this is the end</p>"];

$(":mobile-pagecontainer").on("pagecontainershow", function (event, ui) {

    var ap = $("body").pagecontainer("getActivePage");

    if (ap.attr("id") === "results") {

        var keywords = ui.prevPage.find("#keywords").val(),
            keywordArray = keywords !== undefined ? keywords.split(" ") : [""];

        // drop last results
        $("#resultContainer").empty();

        // traverse urls
        $.each(urls, function (urlidx, value) {
            var req = $.ajax({
                url: value,
                dataType: "html",
                // jsfiddle-demo only: just simulating page content in order to
                // produce a runnable ajax fiddle
                data: {
                    html: simulatedDoms[urlidx]
                },
                method: 'post'
            });
            // don't forget to implement "fail" or "always"
            req.done(function (data) {
                if (data !== undefined && data.length > 0) {
                    $.each(keywordArray, function (index, value) {
                        if (data.match(value)) {
                            var k = value.length > 0 ? value : "no keywords given";
                            // append one link when content matches a keyword
                            var clickableURL = "<a href='" + urls[urlidx] + "' target='_blank'>" + urls[urlidx] + " ('" + k + "', url index " + urlidx + ")" + "</a><br/>";
                            $("#resultContainer").append(clickableURL);
                        }
                    });
                }
            });
        });
    }
});

搜索多个网页网址并将其显示为HTML

1 个答案: