Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
worked fine on its own, without the php data .. ?? it gets the data as a json from server – Gaurav Shah Apr 12 '12 at 10:16
Do you want to have a select box or a text box with autocomplete? – Paul Apr 12 '12 at 10:18
I wanted to have both. Hear me out before you call me crazy. I wanted users to be able to select options as they type, and the only way to create options is with select (that I know of) and the only way to give users the ability to type is to offer a text box (that I know of) – Mariee McCullin Apr 12 '12 at 10:20
post an example that is already available on web , so that we better understand what you actually want – Gaurav Shah Apr 12 '12 at 10:23
webjet.com has a feature that lets users type in locations and the textbox brings up a list of locations as the users type – Mariee McCullin Apr 12 '12 at 10:25

2 Answers

up vote 0 down vote accepted

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

share|improve this answer
ive used this plugin before and it worked beautifully. ill test it out and get back to you – Mariee McCullin Apr 12 '12 at 10:44
why is it printing the query above the textbox? – Mariee McCullin Apr 12 '12 at 10:53
up vote 0 down vote 
<?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 type="text/javascript">
  $(function() {
    var availableItems = [ <?php print '"'.implode('","', $autocomplete).'"'; ?> ];
    $("#combobox").autocomplete({
      source: availableItems,
      minLength: 3
    });
  });
</script>

Note: Just written out of my head, might need customization.

EDIT: In your HTML you need an input element with the id combobox.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.