How to link Typeahead Search Results to another page

Question

I just installed Twitter Typeahead (older vesion 0.9.3).

Right now it links to a search.php page which queries the MySQL database to get the results. It gets the results I need, however, when I select the results, I can't figure out how to pass the ID or other information create a link to another page.

Here is the function in the HTML page that's calling the search.php page:

<script>
$(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'search.php?key=%QUERY',
        limit : 10
    });
});
</script>

Then search.php is called which queries the database correctly and gets the results I need:

<?php
$key=$_GET['key'];
$array = array();
$con=mysql_connect("hostname","username","password");
$db=mysql_select_db("databasename",$con);
$query=mysql_query("select * from customers where clientDisplayName  LIKE '%{$key}%' OR clientPhNumber  LIKE '%{$key}%' OR clientAltPhNumber LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
{
  //$array[] = "<a href='customer-details.php?cid=".$row['id'] ."'><tr><td>" . $row['clientDisplayName'] . "</tr></td></a>";
  $array[] = $row['clientDisplayName'];
}
echo json_encode($array);
?>

You can see the comment there, if I use that instead of the array that's uncommented, It will create a link as I desire, however.. it's buggy that way.
By Buggy I mean:

1. I HAVE to click on the actual text instead of anywhere in the result row
2. I cannot simply arrow-down and hit enter to select a response (it must be mouse clicked)
3. and even if it is clicked with the mouse, I can see the whole

Any ideas on what I can do here?

Answer 1

Do not use twitter typeahead. It is abandoned, no longer maintained, it has 250 issues, some of them very serious regarding basic behavior and severe bugs. I would recommend github.com/bassjobsen/Bootstrap-3-Typeahead instead.