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