如何在以下场景中使用PHP，jQuery和AJAX实现自动完成功能？

Question

I'm using PHP, Smarty, MySQL, jQuery and AJAX for my website. Now the scenario is as follows: There are three fields present on my form. The code for these three fields from smarty template is as follows:

<label>Class</label>
    <div class="form-element">
        <select name="class_id" id="class_id" onchange="get_section_by_class(this.value, 'get_section_by_class', '#section_id'); return false;">
            <option value="">-Select Class-</option> 
            {foreach from=$all_class item=class key=key} 
            <option value="{$class.group_id}" {if $class_id == $class.group_id} selected="selected"{/if}>{$class.group_name}</option>
            {/foreach}
         </select>
     </div>
<label>Section</label>
    <div class="form-element">
        <select name="section_id" id="section_id">
        {if empty($section_id)}
            <option value="">-Select Section-</option> 
        {else}
            <option value="all">All</option>
        {/if}
        {foreach from=$all_section_by_class item=section key=key} 
            <option value="{$section.group_id}" {if $section_id==$section.group_id} selected="selected"{/if}>{$section.group_name}</option>
        {/foreach}
        </select>
    </div>
<label>Name</label>
    <div class="form-element">
        <input type="text" class="" name="user_name" id="user_name" value="{$user_name}" />
    </div>

Now from above code I want to make the field named user_name autopopulate. The values to be displayed as auto populated depends on the values selected from the other two select controls from above code. That is I want to pass the values of controls class_id and section_id into the AJAX request to fetch the autopopulate list of Usernames. For this I've written following code but it's not working for me. Can you help me in making the text field named user_name autocomplete enabled? Thanks in advance. My non-workable code is as follows:

{literal}
<script language="javascript" type="text/javascript">
$(function() { 

  $("#user_name").autocomplete({ 
    source: function( request, response ) { 
        $.ajax({ 
          url: "report_student_result.php",
          data: {'request_type':'ajax', 'op':'get_student_names', 'class_id':request.class_id, 'section_id':section_id },
          dataType: "json",
          success: function( data ) {
            response( $.map( data.myData, function( item ) {
              return {
                //How to access the jason response here and assign it in autopopulate?
              }
            }));
          }
        });
      }
  });

});
</script>
{/literal}

The PHP code from the file report_student_result.php is as follows(one of the the switch case):

<?php
    $request     = empty( $_GET ) ? $_POST : $_GET ;
    $op = $request['op'];
    global $gDb; 
     switch($op) {
         case'get_student_names':
         // escape your parameters to prevent sql injection
         $param   = mysql_real_escape_string($_GET['term']);
         $options = array();

         $sql  = " SELECT CONCAT(u.user_first_name, " ", u.user_last_name) as full_name FROM users as u JOIN  users_groups_subscribe as ugs ON u.user_id = ugs.subscribe_user_id WHERE ugs.subscribe_group_id=10 ";
         $this->mDb->Query( $sql);
         $data = $gDb->FetchArray();
         $data = json_encode($data);
         echo $data;
         die;
         break;
    }

?>

I'm also not getting how should I access the json response. After so much googling and all reasearch I've written above code.It may have many mistakes, please help me to make the field autocomplete workable.

Answer 1

You can do this in following manner. I've not tested the code thoroughly. Hope it will work for you.

<script language="javascript" type="text/javascript">
$(function() {
  $( "#user_name" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "report_student_result.php",
      dataType: "json",
      data: {
        request_type: "ajax",
        op: "get_student_names",
        class_id: $('#class_id').val(),
        section_id: $('#section_id').val(),
        name_startsWith: request.term
      },
      success: function( data ) {
        response(
          $.map(data, function(item) {
            return {
              label: item.full_name,
              value: item.full_name
            }
          })
        );
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    if(ui.item) { 
      $(event.target).val(ui.item.value);
    }
    return false;
  },
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
  });
});
</script>