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

Question

我的网站使用的是PHP，Smarty，MySQL，jQuery和AJAX。 现在的场景如下：我的表单上存在三个字段。 smarty模板中这三个字段的代码如下：

<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>

现在，从上面的代码中，我想使名为user_name的字段自动填充。 要显示为自动填充的值取决于从上述代码中的其他两个选择控件中选择的值。 那就是我想将控件class_id和section_id的值传递到AJAX请求中，以获取自动填充的用户名列表。 为此，我编写了以下代码，但不适用于我。 您能帮我启用名为user_name的文本字段自动完成功能吗？ 提前致谢。 我的无效代码如下：

{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}

来自report_student_result.php文件的PHP代码如下（其中一个转换案例）：

<?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;
    }

?>

我也没有得到我应该如何访问json响应。 经过大量的谷歌搜索和所有我上面的代码编写的研究，它可能有很多错误，请帮助我使自动完成字段可行。

Answer 1

尝试这个

 $("#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()
                 },
                 success: function(data) {
                     response(
                         $.map(data, function(item) {
                             return {
                                 label: item.full_name,
                                 value: item.full_name
                             }
                         })
                     );
                 }
             });
         },
         select: function(event, ui) {
             if(ui.item) {
                 $(event.target).val(ui.item.value);
             }
             return false;
         }
    });

在这里，来自服务器的响应应采用以下格式

[{"full_name":"Name 1"},{"full_name":"Name 2"},{"full_name":"Name 3"},.......]

希望有帮助！

Answer 2

您可以按照以下方式进行操作。 我没有彻底测试代码。 希望它对您有用。

<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>

Answer 3

始终直接测试您的PHP，以确保发送给客户端的内容符合您的期望。 同样，我通常总是将ID与数据一起发送，以便在我想对其进行处理时将其发送回服务器。 另外，您无需在查询中使用CONCAT ，因为您可以在客户端上将它们组合在一起（所做的事情没有错，但很高兴拥有选项）。

我个人不使用Smarty模板。 可以使您提供更多答案的个人的受众只是显示最终的HTML。

试试下面的jQuery脚本。 我不知道您想做什么，您可能不需要焦点事件或select事件中的blur()和preventDefault() 。

$("#user_name").autocomplete({
    source: 'report_student_result.php?request_type=ajax&op=get_student_names&class_id='+$('#class_id').val()+'&section_id='+$('#section_id').val(),
    minLength: 2,
    focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
    select: function(event, ui) {
        $(this).val('').blur();
        event.preventDefault();
        //Access your returned data (in object "ui") however you want.
        console.log(ui);
        //Note that you could have sent multiple values such as ui.item.firstname, ui.item.lastname if you want
        alert(ui.item.full_name);
    }
})

Answer 4

我对自动完成小部件的响应选项有相同的问题。 我将自动完成窗口小部件版本从1.8升级到1.9。 现在一切正常。 假设您的代码正确并且使用的版本低于1.9，建议您从1.8切换到1.9。 希望它能工作..