Modifying jQuery plugin SimpleAutoComplete

Question

Hey everyone,

I was hoping someone could nudge me in the right direction. I'm using the jQuery plugin simpleAutoComplete to enhance my search form with an autocomplete functionality. Basically the search functionality allows users to search for capital cities in the world. I have it designed so that my handler file returns the City Name as well as the country / region the city is located in within a span tag below it.

It's working great except for that by default the plugin takes ALL of the text within my auto complete suggestion and transfers it to my search text field. I really only want just the city name to appear in the text field on select, not the additional information of Country / Region as that's just for additional information while searching to make sure you're choosing the right city.

So overall I'm trying to modify the script so that:

1) While my auto complete handler is returning City / Country / Region information in my autocomplete pop up, I only want the 'city' portion to be transferred to my search box when selected.

2) If you hit 'Enter' on an autocomplete suggestion it will automatically forward you to a page.. i.e. index.php?city=Melbourne

3) If you hit enter without highlighting an auto-complete recommendation, the form itself submits as normal.

Here is the simpleautocomplete JS: http://blog.idealmind.com.br/exemplos/simpleautocomplete/js/simpleAutoComplete.js

And the jQuery.com plugin page: plugins.jquery.com/project/simpleautocomplete

This is how I'm calling it:

$("#search").simpleAutoComplete("handler.php");

handler.php looks like this:

    // CONNECTION INFO HERE
 // ...
 // ...

 $city = $_REQUEST['query'];

 $query = "SELECT city_id, city, region, country ...";

 $r = mysql_query($query, $connection);
 if ( $r )
 {
  echo "<ul>";
     while( $l = mysql_fetch_array( $r ) )
     {

         echo "<li rel='" . $l['city'] . "' onClick=\"document.location='index.php?city=" . $l['city_id'] . "'\">" . $l['city'];
   echo "<span>" . $l['country'] . "</span></li>";
  }
  echo "</ul>";
 }

The area I need help is where to modify to achieve these desired modifications... In the JS on line 104 we're returning el.text() which I think is the reason all information is transferred to my search field. I also am unsure how to have the keyboard's 'Enter' key to take you to index.php?city=Whatever if you hit enter while a city is selected, but have the 'Enter' key take you to search.php?query=Whatever if an element is not selected (i.e. they did not see a good recommendation so want to perform a search instead).

Some potentially useful info:
-The highlight line item gets the class ' sel' assigned to it when it's selected.
-You can assign hidden params in the li's rel attribute. I'm passing in the city_id hoping to use this for sending users to index.php?city=Whatever when they hit enter on a recommendation.

Thanks and sorry for the long post! I'm really hoping I can learn something by posting here :)