Question

I am trying to develop a feature on my website that automatically grabs routes available from my table and populate them in a jQuery autocomplete textbox that shows results as they type

I’ve managed to get the query together, and it works perfectly…but without the jQuery added onto it

Heres the code on its own

<?PHP  
mysql_connect('localhost', 'sample', 'sample'); 
mysql_select_db('winning'); 
$sql = "SELECT distinct rout_to FROM search_v ORDER BY rout_to ASC" ; 
$result = mysql_query($sql); 
echo '<div class="ui-widget"><select id="combobox" name="arrival_label">'; 
while ($row = mysql_fetch_array($result)) echo "<option value='" . $row['rout_to'] . "'>" . $row['rout_to'] . "</option>"; 

echo "</select></div>"; ?>

when i tested the autocomplete combobox from the jquery ui library, it worked fine on its own, without the php data

My question was, how would I get these two to play nice?

Answer 1

YOu might wanna try using Jquery UI’s auto complete plugin.

<?php
    $autocomplete = array();
    mysql_connect('localhost', 'sample', 'sample'); 
    mysql_select_db('winning');
    $sql = mysql_query('SELECT distinct rout_to FROM search_v ORDER BY rout_to ASC');
    $r = $db->query($q);
    while ($row = mysql_fetch_array($result))
      $autocomplete[] = $row['rout_to'];
    }
?>
<script>
    $(function() {
        var availableTags = [
          <?php foreach($autocomplete as $a){
              echo '"'.$a.'",';
          }?>
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
</script>

HTML CODE:

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

I think in this case you will no longer be using a select tag but an input tag. I hope it helps.

Thanks,Dave