Autocomplete: On select display label but store value as the value attribute

Autocomplete: On select display label but store value as the value attribute

Hello all,

I am creating a page that has an auto complete for schools. I am retrieving the school names from a page that gets the information from a database and returns it as JSON. The objects returned have a label(the school name) property and a value(the school id) property. What I want to happen is that when a user selects a school name from the autocomplete suggestions the textbox displays the school name(label) but stores the value of the school id so when the data is submitted that is what is sent. I will then process things on the server side depending on if the box contained an id(int) or a text value.

Here is what the autocomplete looks like :

  1. <input id = 'school' name = 'school' type = 'text' />
  2. <script type = 'text/javascript'>
  3.         $("#school").autocomplete({
  4.             source:"schools_json_test.php",
  5.             minLength: 2
  6.         });   
  7. </script>
Here is how the data is sent to the autocomplete. I am using PHP for this :

  1.     if(isset($_GET["term"]))
  2.     {
  3.         $term = $_GET["term"];
  4.         $arr = array(); // array to hold the results
  5.         $sql = "SELECT name AS label,school_id AS value FROM schools WHERE name LIKE '%$term%'";
  6.        
  7.         $result = mysql_query($sql);
  8.         //Store each record in the array as an object
  9.         while($obj = mysql_fetch_object($result))
  10.         {
  11.             $arr[] = $obj;
  12.         }
  13.        
  14.         echo json_encode($arr);
  15.     }
So as you can see I am doing a select, taking the name and id(selecting AS label and value) then storing the results in an array of objects and echoing the array as JSON. This results in the autocomplete being correctly populated, when I select an item from the suggestions list the textbox gets filled in with the id (value) of the item. I know that I have to do something when the selected event fires I'm just not sure how to achomplish what I am trying to do. Also I wanted to mention that while I was messing around with  this trying to figure out how it worked I did add this to the select event :

  1.             select:function(event,ui){
  2.                 $("#school").val(ui.item.label);   
  3.             }
This resulted in it changing what was displayed in the text box to the actual label for a split second before making it the value property again (the id of the item). I'm guessing it is the functionality to fill the text box with the value property upon selection but wouldn't me specifying  to use the label instead override that?

This is the first time I have done something like this so if anyone sees me doing this a way that I shouldn't on server or client side I am absolutely open to suggestions. Any advice anyone could give me on how to accomplish what I am going for would be very very much appreciated. Thanks very much!


Jstall