1

ウェブサイトに PHP、Smarty、MySQL、jQuery、および AJAX を使用しています。シナリオは次のとおりです。私のフォームには 3 つのフィールドがあります。smarty テンプレートのこれら 3 つのフィールドのコードは次のとおりです。

<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という名前のフィールドを自動入力させたいと思います。自動入力として表示される値は、上記のコードの他の 2 つの選択コントロールから選択された値によって異なります。つまり、コントロールの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 ケースの 1 つ)。

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

オートコンプリート ウィジェットの応答オプションで同じ問題が発生しました。Autocomplete ウィジェットのバージョンを 1.8 から 1.9 にアップグレードしました。今では完全に正常に動作しています。コードが正しく、バージョンが 1.9 未満であると仮定すると、1.8 から 1.9 に切り替えることをお勧めします。それがうまくいくことを願っています..

于 2013-10-01T07:21:26.590 に答える