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和数据，以便我可以将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。希望它有效..

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

4 个答案: