mark110384 Posted June 25, 2008 Share Posted June 25, 2008 I'm pretty new to Javascript and I've just finshed developing an AJAX auto-suggest function for my site, I have a couple of issues that I' struggling with, under my search box you can quite clearly see the form border of auto-suggestion box. Although it is just a thin line under the search field, is there a way of hiding it when the search box is not selected? Also the auto-suggestion box stays open until the user selects one of the options, is there a way of hiding the auto-suggestion box when the user clicks away from the search field and is there a way of using keyboard up and down keys in the auto-suggestion box to scroll through options? I know theres a few questions there but any suggestions will be greatly appreciated. Below is the coding I'm using to display the auto complete. body { font: 8px arial; } .suggest_link { background-color: #FFFFFF; padding: 2px 6px 2px 6px; width:336px; } .suggest_link_over { background-color:#6699FF; padding: 2px 6px 2px 6px; width:336px; } #search_suggest { position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #6699CC; } <td width="100"><font face = "Arial" size = "2"><b>Product Search</b></font></td> <td width="200"><input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" size="52" onkeyup="searchSuggest();" autocomplete="off" /><br><div id="search_suggest"></div> Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 25, 2008 Share Posted June 25, 2008 To hide/show the auto-suggestion box I would use an onfocus and onblur event for the search box which changes the display property of the auto-suggestion box. For up and down arrow functionality you will need to trap the keystrokes and identify when the up or down arrow is selected and manually change the selected value. Here is a sample script for capturing keystrokes: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>test</title> <script language="javascript"> var altKey = false; function init() { var oinputs = document.getElementsByTagName('input'); for (var i = 0; i < oinputs.length; i++) { oinputs[i].onkeydown = function (e) { e = e || event; switch (e.keyCode) { case 9: // tab // enter whatever you want to happen if the user hits tab // while that input is in focus alert('you hit tab'); return false; //Prevents tabbing to next field break; case 13: // enter alert('you hit enter'); return false; //Prevents submitting a form break; case 18: // alt // same for the enter button altKey = true; break; case 81: // alt // same for the enter button if (altKey) { alert('Alt-q'); } break; default: // the rest of the keys break; } } oinputs[i].onkeyup = function (e) { e = e || event; switch (e.keyCode) { case 18: // alt // same for the enter button altKey = false; break; } } } } </script> </head> <body onload="init()"> <input type="text" name="1"/> <input type="text" name="2"/> <input type="text" name="3"/> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.