1

我在我的网站上使用 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 代码如下(其中一个switch 案例):

<?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 响应。经过这么多的谷歌搜索和所有的研究,我写了上面的代码。它可能有很多错误,请帮助我使该字段自动完成可行。

4

4 回答 4

4

尝试这个

 $("#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"},.......]

希望有帮助!

于 2013-10-01T10:33:59.337 回答
4

您可以通过以下方式执行此操作。我没有彻底测试过代码。希望它对你有用。

<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>
于 2013-10-05T12:22:20.860 回答
0

Always test your PHP directly to make sure that the content you are sending to the client is what you expect. Also, I typically always send an ID along with the data so that I can send the ID back to the server if I want to do something with it. Also, no need to use CONCAT in your query as you can combine them on the client (nothing wrong on what you did, but good to have options).

I personally do not use Smarty templates. What would give you a greater audience of individuals providing answers would be to just show the resulting HTML.

Try the following jQuery script. I don't know what you want to do, and you wight not need the focus event or the blur() and preventDefault() in the select event.

$("#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);
    }
})
于 2013-09-30T13:02:58.993 回答
0

我对自动完成小部件的响应选项有同样的问题。我将我的自动完成小部件版本从 1.8 升级到了 1.9。现在它工作得很好。假设您的代码是正确的并且您使用的版本低于 1.9,我建议您从 1.8 切换到 1.9。希望它有效..

于 2013-10-01T07:21:26.590 回答