Friday, November 18, 2005

Yet another Google Suggest clone

A colleague of mine said wouldn't it be really great if we could have Google Suggest like functionality in our web applications. Applications like our contacts directory would really benefit. He said this in such a wistful way that I sensed he thought it was highly unlikely that this would ever happen.

I had a couple of hours to kill so I thought I'd take a look at the problem. Having perused the obfuscated Google Maps JavaScript code previously I knew that reverse engineering Google Suggest was probably a non-starter. I immediately stumbled upon ObjectGraph's Dictionary which exhibit's something like the desired behaviour. There was even a helpful explanation and sample source code written in JavaScript and ASP. This was now far too tempting a challenge to resist so I set about writing a similar application using JSTL.

Firstly the backend database, my initial contact directory example used a dataset of 30000 tuples of data. I wanted to use an embedded database since I was sure that our DBA's would not be happy if I ran a potentially labour intensive application against their important data. I initially tried to import the data into HQLDB but it was flaky and kept running out of memory, not a good start. I had a quick scout about and settled on giving Apache Derby a go. Apache Derby recently graduated from the Apache Incubator but in this case this did not mean it was Alpha code. Derby was only in the incubator for the transition period from the commercial database CloudSpace into the open source Derby project.

Derby contains a very useful interactive shell that I could use from the command line to quickly install my data. For illustrative purposes I have created a tiny version of the application using the chemical element data from the periodic table.

Using Derby's ij to run SQL scripts:

java -cp ./lib/derby.jar;./lib/derbytools.jar -Dij.database=jdbc:derby:elements;create=true elements_create.sql
java -cp ./lib/derby.jar;./lib/derbytools.jar -Dij.database=jdbc:derby:elements elements.sql

I knocked up a quick JSTL page to query the database and return the results that would eventually appear in the search drop down.

<%@ taglib prefix="c" uri="" %>
<%@ taglib prefix="sql" uri="" %>


<c:set var="sql">
select Name, ElementSymbol, AtomicWeight, AtomicNumber from Element where lcase(Name) like lcase('<c:out value="${param.k}"/>%')

<sql:query var="queryResults" dataSource="${dataSrc}" maxRows="10" sql="${sql}"/>

<c:forEach var="row" items="${queryResults.rows}">
<c:out value="${}"/>;Symbol = <c:out value="${row.elementsymbol}"/>, Atomic Number = <c:out value="${row.atomicnumber}"/>, Atomic Mass = <c:out value="${row.atomicweight}"/>:

I thought I would build upon the JavaScript that ObjectGraph are using. However, I wanted more Google Suggest like behaviour. I found two articles on a similar theme; phpRiot's Cloning Google Suggest with AjaxAC and XmlProNews's Building A Suggest List With XMLHttpRequest. Borrowing some of the CSS from the phpRiot article and some of the approach from the XmlProNews article I managed to coble together something that I was happy with and the result can be found at:

Granted this is not yet perfect but I think you'll agree it is nethertheless very impressive and it was not a very complicated thing to do either. Allowing the world at large to access this application will also give me a pretty good idea of how robust this mechanism is although if my blog goes offline you'll know why!


Mark McLaren said...

Hi can this implemented using Ajax + Jsp/Servlets alone?
Note: Comment imported. Original by Ajo at 2006-01-01 20:01

Mark McLaren said...

I presume you mean without the database?

Something simple like the periodic table could be entirely implemented using JavaScript alone (no JSP/Servlets at all), all the necessary data could be included in the JavaScript itself. This example uses a database to illustrate how this could be extended to a much larger dataset.
Note: Comment imported. Original by markmc website: at 2006-01-02 19:07

Mark McLaren said...

can u make the code available... it would help to customize
Note: Comment imported. Original by jun kid at 2008-01-03 17:03

Mark McLaren said...

Pretty much all of the code should either be in the page above on in the JavaScript files.

I would advise you to use a JavaScript library to do this.

See here!
Note: Comment imported. Original by markmc website: at 2008-01-11 10:57