My first attempt with jQuery involved using an autocomplete  plugin provided by Pengoworks. Autocomplete is where you start typing in a few letters and the text box will come up with some suggestions. There was a tutorial for this present on the jquery autocomplete page, but it didn’t quite meet my needs, and maybe it doesn’t meet yours.

There are two ways in which to use the auto complete functionality. If there are a few options (ie upto 50) the list of suggestions can be embedded in the web page itself, but if there are many options (1000s) the suggestions need to come back from a server. It was this second process that the tutorial did not cover, and hence the reason for providing a step by step guide to doing it here.

In partcular, I’m working from Java in Netbeans 6.8.

Server Side:Put data in the database/class in which it will reside

The list of suggestions will live on a server somewhere. If working with 1000′s of items you will need to run it in a database.

Server Side: Provide a class that will take a substring and find matches from your word list

Returning your data as type List is useful.


public List getAutoCompleteMatches( String starter ) throws SQLException


Another handy bit of info here is to use a regular expression in any SELECT statement being generated to match the start of a word.

String sql = "SELECT * FROM tablename WHERE name REGEXP '^" + starter + "' " ;

String sql = "SELECT * FROM tablename WHERE name LIKE '" + starter + "'" ;

Server Side: Provide A Web Page Containing the results of such a query

Your web page will need somewhere to call to get its results. This will take the form of a servlet or JSP page. The code for either is easy – here is the code as a JSP page.


<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="com.rishistar.mirbaseUtils.MirBaseMatches"%>
<%
MirBaseMatches m = new MirBaseMatches() ;
String query = request.getParameter( "q" ) ;
List matches = m.getAutoCompleteMatches( query ) ;
Iterator iterator = matches.iterator() ;
while( iterator.hasNext() )
{
out.println( (String)iterator.next() ) ;
}
%>


Client Side:Include the jQuery Script

Obviously if you are going to use jQuery to do the job of autocompletion and fetching results from the server you’ll need to include it in the generated web page. Simple enough…download the latest version from jQuery.com and include it. There are two versions – one to use during development to allow debugging and one to use on a live site – the ‘min’ version. Change the below to meet your path requirements.

<script type="text/javascript" src="jquery.1.4.2.js">
</script>
<script type="text/javascript" src="jquery.autocomplete.js">
</script>

Client Side:Include the code to get your autocomplete box

So the final bit is putting the autocomplete box into your page.

<input id="mirna" name="mirna" type="text" />

<script type="text/javascript">

     $("#mirna").autocomplete("getmirmatch.jsp") ;

</script>