Creating Search Engine with Jquery UI tabs-accordians without using a database or serverside scripting

Creating Search Engine with Jquery UI tabs-accordians without using a database or serverside scripting

I am trying to search this page. I want to search through the dialog content and keywords.
    I cant seem to find a way to link it all together.  I am utilizing Jquery UI dialog, accordian and tabs.
   
    I was trying to group everything up in like a table format.
    | Link Text | Link | description(title of dialog) | % of likely hood of match
   
    Everything must be done on one page no PHP or databases or asp or anything like that.
    And like maybe If they click on a result it takes you the tab its located in and highlights the
    link to the dialog they were trying to open.  This is done on internal server so google search can not be utilized.  I am not a pro or anything probably more along the lines of an intermediate.  Please share your ideas with me.  here is the code.

  1. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />

    <title> Jquery testing going on here</title>
    <link type="text/css" href="redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var tNames = [];
    var tList = [];
    tNames["aTitle"] = [];
    tNames["alink"] = [];
    tNames["aDesc"] = [];
    // intialize widgets
    $("#tabs").tabs();
    $("#ac1").accordion();   

    // autocomplete
    var autosrc = [];
    var gAutosrc = $("div[id^='tabs-'] ul li a").each(function(){
    var tPush = $(this).text();
    autosrc.push($(this).text());
    });
    $("#sIn").autocomplete({
        source: autosrc
    });
    //


    var $allTabs = $("div[id^='tabs-']");
    var $allcontent = $("div#myDialogs > div");
    var tcurLink = $allTabs.find("a");

     



    });



    function sBox(){
       
       
        /*
        I am trying to search this page. I want to search through the dialog content and keywords.
        I cant seem to find a way to link it all together.
       
        I was trying to group everything up in like a table format.
        | Link Text | Link | description(title of dialog) | % of likely hood of match
       
        Everything must be done on one page no PHP or databases or asp or anything like that.
        And like maybe If they click on a result it takes you the tab its located in and highlights the
        link to the dialog they were trying to open.
       
        */

    });
    };

    function getDialog(dName, dType){

        $(dName).dialog({
         autoOpen: false,
         height: 300,
         width: 300,
         buttons: {
         "Ok": function() { alert(""); },
         "NO": function() { alert("");}}
        });
        $(dName).dialog('open');
        break;
        default:
       
    }


    };

    </script>
    </head>
    <body>
        <div id="searchbox">
            <input type="text" id="sIn" length="40" value="enter txt..." />
            <button id="sBtn" onclick="sBox();">Search</button>
        </div>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">HTML</a></li>
                <li><a href="#tabs-2">CSS</a></li>
                <li><a href="#tabs-3">JAVASCRIPT</a></li>
            </ul>
            <div id="tabs-1">
                <div id="ac1">
                    <h3><a href="#">Test Accord 1</a></h3>
                        <div>
                            <ul>
                                <li><a href=javascript:getDialog("#test1",1)>CREDIT RATE SHEET</a></li>
                               
                            </ul>
                        </div>
                    <h3><a href="#">Test Accord 2</a></h3>
                        <div>
                            <ul>
                                <li><a href=javascript:getDialog("#test2",2)>FIANANCE YOUR CAR</a></li>
                            </ul>
                        </div>
                        <h3><a href="#">Test Accord 3</a></h3>
                        <div>
                            <ul>
                                <li><a href=javascript:getDialog("#test3",1)>HOW TO BLOW UP CARS</a></li>
                            </ul>
                        </div>
                </div>
            </div>
            <div id="tabs-2">
            <ul>
                    <li>the effects of jquery</li>
                </ul>
            </div>
            <div id="tabs-3">
            <ul>
                    <li>on your face.</li>
                </ul>
            </div>
        </div>
        <div id="myDialogs" style="visibility:hidden">       
            <div id="test1" title="woowoo">       
            <input type="hidden" name="keywords" value ="airplanes, 747, jets, stealth bomber">
            <p>content i want to be searchable</p>
            </div>
            <div id="test2" title="woowoo boo boo">
            <input type="hidden" name="keywords" value ="bmx, mountain bike, race bike, tricycle">
            <p>content i want to be searchable</p>
            </div>
            <div id="test3" title="woowoo doo doo">
            <input type="hidden" name="keywords" value ="tabby, ally cat, cat"
            <p>content i wan to be searchable</p>
            </div>
        </div>
    </body>
    </html>