Search Multiple Webpage URL and Display as HTML

Question

I am normally not a back-end programmer (that's why I can't really understand programming stuff), but I am requested to develop an ios mobile app using jQuery Mobile. Will truly appreciate it if some kind souls are willing to help me out!

I am currently doing a search function, in which user should type a keyword, and the jquery script should search through 60+ url pages (pages written in .aspx, only can run using intranet) in one go and return links which contains the keyword in it. When the link is pressed, the result should display in the application window as a simple html page (no style or anything).

My current chain of thought is:

1. preload multiple pages into DOM
2. search keyword in content in the the pages loaded in DOM
3. display result in clickable url / static html

Would like to ask if my idea is correct? I have seen some $mobile.loadPage() , .load(), $mobile.changePage() ?, but did not know how to implement them / connect them together.

Is there any suggestion how I can start / refer to in order to get this search feature up more efficiently?

Thank you very much in advance!

Answer 1

In this fiddle I've put together JQM's multipage template and a keyword(s) lookup in content from ajax calls.

Because of same origin rules (javascript access rights for different/same domains) I used jsfiddles "echo/html"-Simulation for ajax calls.

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);
                        }
                    });
                }
            });
        });
    }
});