Type ahead in drop down lists

Question

Hi, I would like to be able to type ahead in drop down lists. E.g. with an alphabetical drop down list having
Scott
Sean
Soo
Steven
I would like to be able to position within that drop down list by typing e.g. st and land upon steven, however when I key in st, I find myself at the top of the entries in the drop down list starting with t.
Any ideas? Something I overlooked?
Best regards, Jesper

Answer 1

Jesper,
I admit that I don't fully understand how it all works, but I'll explain the general steps I took to get it working. Hopefully some of the smart people here can show us a better way to do it.
I don't think that I should post the actual javascript file because the first line of it says:
"// Copyright 2004 and onwards Google Inc."
But, you can get the original version of it here: http://www.google.com/ac.js
If you save it and a copy of the page that calls it on your local web server, you can play around with it.
It looks like a real mess. This guy has dissected it: http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html
From all that, you can see that the end result is that the script calls a URL like this, with your query at the end:
http://www.google.com/complete/search?hl=en&js=true&qu=transparent%20aluminu
Which returns a result like this:
sendRPCDone(frameElement, "transparent aluminu", new Array("transparent aluminum", "transparent aluminum 3m"), new Array("426,000 results", "31,900 results"), new Array(""));
The script can be edited to call any URL. I changed it to call a stored procedure on my HTML DB web server. The changes were:
Line 3: Change pn="search" to pn="schema.package.procedureName"
Line 14: Change else E="/complete/" to E="/pls/htmldb/" (The Location entry set in your Marvel.conf)
You then need to create a stored procedure that will be called from Line 3.
It needs to have 3 varchar2 parameters called qu, hl, and js. The first one is the query string. I didn't use the other two.
It needs to return a message like the script is expecting - with the results concatenated in comma-separated arrays. Here is a simple example:
create procedure INCSEARCH(qu varchar2, hl varchar2, js varchar2) as
l_List1 varchar2(4000);
l_Query varchar2(255);
l_separator varchar2(10) default '';
begin
l_Query := qu || '%';
for x in (select Last_Name from hr.Employees where Upper(Last_Name) like Upper(l_Query) order by 1)
loop
l_list1 := l_List1 || l_separator || '"' || x.Last_Name || '"';
l_separator := ',';
end loop;
owa_util.mime_header('text/html', false);
owa_util.http_header_close;
htp.p('sendRPCDone(frameElement, "'|| qu ||'", new Array(' || l_List1 || '), new Array(' || l_List1 || '), new Array(""));');
end;
Grant Execute on INCSEARCH to Public;
The last step is to hook it into HTML DB. Examining the Google page shows that they run a script called InstallDC to hook the script to a form field.
In the Footer section of the Page Attributes of my page, I added this:
<SCRIPT src="/ac.js"></SCRIPT>
<SCRIPT>InstallAC(document.wwv_flow,document.wwv_flow.p_t03,document.wwv_flow.p_t03,"dc_htmldb.incsearch","en");</SCRIPT>
Where p_t03 is the name of the text field I want it attached to, and "dc_htmldb.incs.incsearch" is my stored procedure.
Those are the basic steps. Does anyone have a cleaner approach?