Unfortunately, that did not work for me...  I have tested with both
Safari4 and FF3.  Any other ideas?  Thanks, L

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.7.1/themes/smoothness/ui.all.css" rel="stylesheet" />
<link type="text/css" href="css/autocomplete/jquery.autocomplete.css"
rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/
jquery-ui.js" type="text/javascript"></script>
<script src="js/preload/jquery.preload.js" type="text/javascript"></
script>
<script src="js/autocomplete/jquery.autocomplete.js" type="text/
javascript"></script>
<script src="js/uuid.js" type="text/javascript"></script>
<script type="text/javascript">
function getCurrentTabPanel(tab) {
        var elem = null;
        if("string" == typeof(tab)) { // the id of the tab element
                if(tab.indexOf("#") == 0) { // selector passed (e.g. #divId)
                        elem = $(tab)[0];
                }
                else { // just the id was passed - convert to selector syntax
                        elem = $("#" + tab)[0];
                }
        }
        else if("object" == typeof(tab)) { // HTMLDivElement - the tab
element object
                elem = tab;
        }
        else { // default behavior
                // find the currently active tab and grab its href (i.e. 
selector)
                var href = $("#tabs ul li.ui-state-active a").attr('href');
                elem = $(href)[0];
        }
        if(elem === null) { // sanity check
                throw new Error("No valid element found to paint tabs 
results!");
        }
        return elem;
}

function renderGroupHtml($cPanel, title, description) {
        var html = "<h3><a href='#'>" + title + "<\/a><\/h3><div><ul><li>" +
description + "<\/li><\/ul><\/div>";
         $(html).appendTo($cPanel);
}

function paintResults(tab) {
        var searchMode = false;
        var elem = getCurrentTabPanel(tab);
        $(elem).children().each(function(){
                var url = null;
                var term = $.trim($("#searchInput").val());
                if(term != "" && term != "Search") { // search
                        url = "ajax/search.json";
                        term = term.toUpperCase(); // case insensitive search
                        searchMode = true;
                }
                else {
                        switch(elem.id) {
                                case "tabs-1" : url = "ajax/sakai.json"; break;
                                case "tabs-2" : url = "ajax/delicious.json"; 
break;
                                case "tabs-3" : url = "ajax/facebook.json"; 
break;
                                case "Google_Groups" : url = 
"ajax/google.json"; break;
                        }
                }
                if(url == null){
                        throw new Error("JSON url cannot be null! Unknown tab 
perhaps?");
                }
                var $cPanel = $(this);
                $.getJSON(url, function (data){
                        $cPanel.empty();
                        $cPanel.accordion('destroy');
                        $.each(data.groups, function(i, group) {
                                var title = group.title.toUpperCase();
                                var description = 
group.description.toUpperCase();
                                if(searchMode) {
                                        if(title.indexOf(term) >= 0 || 
description.indexOf(term) >= 0)
{
                                                renderGroupHtml($cPanel, 
group.title, group.description);
                                        }
                                }
                                else {
                                        renderGroupHtml($cPanel, group.title, 
group.description);
                                }
                        }); // $.each
                        // if(!searchMode) { // only save state if not in 
search mode
                        //      $(elem).data("initialContent", 
$cPanel.clone(true));
                        // }
                        $cPanel.accordion({
                                autoHeight: true,
                                clearStyle: true
                        });
                }); // $.getJSON
        }); // $(elem).children().each
} // function paintResults(tab)

function clearResults() {
        // var tabElem = getCurrentTabPanel();
        // $(tabElem).children().each(function(){
        //      $(this).replaceWith($(tabElem).data("initialContent").clone
(true));
        // });
        $("#searchInput").val(""); // clear input text
        paintResults();
        $("#searchInput").select().focus(); // search input should be null
and have focus
}

// document ready...
$($.preload([ 'images/pbar-ani.gif' ])); // preload images
$(function() {
        $("#tabs").tabs({
                spinner: '<img src="images/wait30trans.gif" alt="Busy" />'
        });
        $('#tabs').bind('tabsselect', function(event, ui) {
                //    ui.tab     // anchor element of the selected (clicked) tab
                //    ui.panel   // element, that contains the selected/clicked 
tab
contents
                //    ui.index   // zero-based index of the selected (clicked) 
tab
                paintResults(ui.panel);
        });
        $('#tabs').trigger('tabsselect', ""); // need to trigger event to get
first tab to paint at load
        $("#pleaseWait").dialog({ // init the pleaseWait dialog
                bgiframe: true,
                modal: true,
                closeOnEscape: false,
                stack: true,
                resizable: false,
                autoOpen: false,
                width: '18.55em',
                dialogClass: 'pleaseWaitDialog'
        });

        // register the ajax event handlers
        $(document).ajaxStart(function() { // I chose document but I think
any element works(?)
                $("#progressBar").progressbar('value', 20); // start at 20% 
complete
                $('#pleaseWait').dialog( 'open' ); // open the dialog
        }).ajaxSend(function(){
                $("#progressBar").progressbar('value', 40); // 40% complete
        }).ajaxSuccess(function(){
                $("#progressBar").progressbar('value', 60); // 60% complete
        }).ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError)
{
                //TODO what to do here? Error dialog?
                $("#console").append("ajaxError:" + XMLHttpRequest.statusText +
"<br />");
        }).ajaxComplete(function(){
                $("#progressBar").progressbar('value', 80); // 80% complete
        }).ajaxStop(function() {
                $("#progressBar").progressbar('value', 100); // 100% complete
                setTimeout("$(\"#pleaseWait\").dialog('close');", 333); // 
slight
delay before closing;
                setTimeout("$(\"#progressBar\").progressbar('value', 0);", 
500); //
make sure progressBar value = 0;
        });
        $("#progressBar").progressbar(); // init the progress bar
        $("#help").resizable({ // make the #help window resizable
                minWidth: 300,
                minHeight: 200,
                autoHide: true
        });
        $("#help").draggable({ // make the #help window draggable
                handle: '#helpHeader',
                opacity: 0.9,
                scroll: true
        });
        $("#helpIcon").click(function() { // click event handler for
#helpIcon
                $("#helpIcon.ui-state-default, #helpIcon.ui-state-hover").each
(function() {
                        $("#help").fadeIn();
                });
                $("#helpIcon.ui-state-active").each(function() {
                        $("#help").fadeOut();
                });
                return false;
        });
        $("#closeHelp").click(function() {
                $("#help").fadeOut();
                $("#helpIcon.ui-state-active").each(function() {
                        $(this).removeClass('ui-state-active');
                });
                return false;
        });
        $('.ui-state-default').hover(
                function(){ $(this).addClass('ui-state-hover'); },
                function(){ $(this).removeClass('ui-state-hover');
                return false;
        });
        $('.ui-state-default').click(function(){
                $(this).toggleClass('ui-state-active');
                return false;
        });
        $("#clearSearch").click(function() {
                clearResults();
                return false;
        });
        $("#searchForm").submit(function() {
                var term = $.trim($("#searchInput").val());
                paintResults();
//              $("#searchInput").val(term); // minor UX tweak - replace with
current search term
                $("#searchInput").val(term).select().focus(); // search input 
should
be null and have focus
                return false;
        });
        $("#searchInput").focus(function(){
                if($(this).val() == "Search"){
                        $("#searchInput").val("");
                }
                return false;
        });
        // $(document).keypress(function (e) { // I wish this would work in
an input field!
        //      if(e.which == 27) { // escape key
        //              clearResults();
        //      }
        // });
        $('#searchInput').autocomplete("ajax/autocomplete.txt", {
                cacheLength: 100
        });
});
</script>

<style type="text/css">
* {
        // margin:0;
        // padding:0;
}
body {
   font-size: 100.1%; // compatible with most browsers (for em setup)
 }
#help {
        position: absolute;
        width: 600px;
        height: 300px;
        min-width: 300px;
        min-height: 200px;
        margin: 0px;
        padding: 0.5em;
        z-index: 999;
        top: 1em;
        right: 1em;
}
#help h3 {
        text-align: center;
        margin: 2px;
}
#help p {
        padding: 0.4em;
}
#helpHeader {
        cursor: move;
}
#closeHelp {
        float: right;
        position: relative;
        top: -1.1em;
        right: 0.6em;
}
span.ui-icon {
        margin: 0 4px;
}
#search {
        display: inline;
        float: right;
        position: relative;
        top: -2.3em;
        right: 4em;
        height: 1.75em;
}
#clearSearch {
        float: right;
        position: relative;
        top: -1.25em;
        right: 0.2em;
        z-index: 2;
}
#helpIcon {
        display: inline;
        float: right;
        position: relative;
        top: -1.9em;
        right: -12.5em;
        z-index: 1;
}
#progressBar {
        height: 22px;
        width: 15em;
        position: relative;
        top: 1.9em;
}
.ui-progressbar-value {
        background-image: url(images/pbar-ani.gif);
}
.pleaseWaitDialog .ui-dialog-titlebar-close {
        // display: none; // hide the close button
}
.tabContent ul {
        margin: 0px;
        font-size: 0.7em;
}
.ac_over { // does not help fix bug - keyboard still not working
        margin: 0px;
}
</style>
</head>
<body>
<div id="outerBox">
        <div id="tabs">
                <ul>
                        <li><a href="#tabs-1"><span><img src="images/sakai.png"
alt="Sakai" /></span></a></li>
                        <li><a href="#tabs-2"><span><img 
src="images/delicious1.png"
alt="Delicious" /></span></a></li>
                        <li><a href="#tabs-3"><span><img 
src="images/facebook.png"
alt="Facebook" /></span></a></li>
                        <li><a href="#Google_Groups"><span><img 
src="images/google.png"
alt="Google" /></span></a></li>
                </ul>
                <div id="search" class="ui-widget ui-widget-header 
ui-state-default
ui-corner-all" title="Search">
                        <form id="searchForm" method="post" action="javascript: 
;"><!--
action hack; why? -->
                                <input id="searchInput" tabindex="1" 
type="text" name="searchText"
value="Search" />
                        </form>
                        <a id="clearSearch" href="#"><span class="ui-icon 
ui-icon-close"></
span></a>
                </div>
                <div id="helpIcon" class="ui-widget ui-state-default 
ui-corner-all"
title="Help">
                        <span class="ui-icon ui-icon-help"></span>
                </div>
                <div id="tabs-1">
                        <div id="tabs-1-content" class="tabContent"></div>
                </div>
                <div id="tabs-2">
                        <div id="tabs-2-content" class="tabContent"></div>
                </div>
                <div id="tabs-3">
                        <div id="tabs-3-content" class="tabContent"></div>
                </div>
                <div id="Google_Groups">
                        <div id="Google_Groups-content" 
class="tabContent"></div>
                </div>
        </div> <!-- tabs -->
</div> <!-- outerBox -->

<div id="help" class="ui-widget ui-corner-all ui-helper-hidden">
        <div id="helpHeader" class="ui-widget-header">
                <h3>Help: Group Search</h3>
                <div id="closeHelp" class="ui-widget ui-corner-all" 
title="Close">
                        <a href="#"><span class="ui-icon 
ui-icon-closethick"></span></a>
                </div>
        </div>
        <div id="helpContent" class="ui-widget-content">
                <p>You will find some really useful content sensitive help.</p>
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,
risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam
elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed
magna quis ligula eleifend adipiscing. </p>
        </div>
</div>
<div id="pleaseWait" title="Please wait..." class="ui-helper-hidden">
        <div id="progressBar"></div>
</div>
<div id="console"></div>
</body>
</html>


On Apr 13, 9:30�pm, Tom Worster <f...@thefsb.org> wrote:
> i finally figured this out after a lot of trial and error.
>
> for keyboard navigation of the suggestions menus to work you must have a
> style rule for the element li.ac_over defined i your css. i was astonished
> when i discovered this but after reading the script i think i have a notion
> how this can be.
>
> anyway, there it is. put a rule for li.ac_over in your style sheet.
>
> On 4/6/09 6:52 PM, "Tom Worster" <f...@thefsb.org> wrote:
>
>
>
>
>
> > I'm unable to make the keyboard selection of suggestions from the
> > dropdown work in my project, otherwise it works fine and selection
> > with the mouse is possible.
>
> > I'm using safari 3 and ff3. Keyboard selection in the demos is working
> > fine, so this seems not to be a browser issue. I've checked that I
> > have the newest jquery.autocomplete.js plugin code. I've checked
> > through the API docs and demo code and can't find anything that seems
> > to enable or disable keyboard selection. I'm stuck and would be
> > grateful for help.
>
> > Here's the markup:
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
> >www.w3.org/TR/html4/loose.dtd">
> > <html>
> > <head>
> > <title>Test new suggest</title>
> > <script src="jquery.js" type="text/javascript"></script>
> > <script src="jquery.autocomplete.js" type="text/javascript"></script>
> > <script src="suggest-test.js" type="text/javascript"></script>
> > <link href="suggest-test.css" rel="stylesheet" type="text/css">
> > </head>
> > <body>
> > <form method="post">
> > � <label for="artisttext">Artist</label><br>
> > � <p><input type="text" id="artisttext" name="artist" class="auto"></
> > p>
> > � <p><input type="submit" name="submitform" value="Submit"></p>
> > </form>
> > </body>
> > </html>
>
> > And the script:
> > $(document).ready(function() {
> > $('#artisttext').autocomplete('suggest-test.php', {extraParams: {p1:
> > 'as'} });
> > $('.auto').setOptions({minChars: 2, delay: 200, max: 50});
> > });

Reply via email to