2

ウェブサイトに PHP、jQuery、AJAX、JSON などを使用しています。私は AJAX、JSON などの初心者です。オートコンプリート機能を 1 つのテキスト ボックスに実装しています。そのためのすべてのコードを書きました。PHP ファイルからのユーザー入力に基づいて、目的の json 応答値を取得していますが、この応答を提案として表示することはできません。ローダの画像だけがぐるぐる回って回ります。同時に、「Firebug コンソールの応答」を見ると、PHP ファイルから適切な応答を受け取っていることがわかります。ご参考までに、私のコードから必要なコード スニペットを以下に示します。これらの受け取ったjson応答値を、オートコンプリートが有効なテキストボックスの下に提案として表示する方法を教えてください。私の問題をよりよく理解するために、実際の問題を伝えるコメントをjQueryコードに入れました。

HTML および jQuery コードは次のとおりです。

<div class="form-element ui-widget">
  <input type="text" class="" name="user_name" id="user_name" value="{$user_name}"/>
</div>
$(function() {
  $( "#user_name" ).autocomplete({
  source: function( request, response ) {
    var class_id   = $('#class_id').val();
    var section_id = $('#section_id').val();
    $.ajax({
      url: "report_student_result.php?op=get_student_names&class_id="+class_id+"&section_id="+section_id,
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
      },
      success: function( data ) { 


    /*Actually here I'm having a problem in displaying the json values properly
          Can you guide me in writing the json valus properly
          Forgive me if I've written something wrong below as I'm a newbie in json*/
        /*response( data, function(item) {
          return {
            label: item.full_name,
            value: item.full_name
          }
        });*/
          var autoCompleteDataSource = $.map(data, function( item ) {
          return {
            label: item.full_name,
            value: item.user_id
          }
        });
        $("#user_name").autoComplete({source: autoCompleteDataSource});
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {if(ui.item) { alert(event);
                 $(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" );
  }
  });
});

これで、PHP コードは次のようになります。

<?php
  require_once("../../includes/application-header.php");
  prepare_request();
  $request     = empty( $_GET ) ? $_POST : $_GET ;
  global $gDb;
  $op = $request['op'];
  switch($op) {
    case'get_student_names':
      $param = $_GET["name_startsWith"];
      $group_id = $request['class_id'];

      if($request['section_id'] !='all')
        $group_id = $request['section_id'];

      if ($group_id != '') {
     $sql  =" SELECT u.user_id, CONCAT(u.user_first_name, ' ', u.user_last_name) as full_name ";
     $sql .=" FROM ".TBL_USERS." as u JOIN ".TBL_USERS_GROUPS_SUBSCRIBE." as ugs ON u.user_id = ";
     $sql .=" ugs.subscribe_user_id WHERE ugs.subscribe_group_id = ".$group_id." AND (u.user_first_name ";
     $sql .=" REGEXP '^$param' OR  u.user_last_name REGEXP '^$param')";
       } else {
     $sql  =" SELECT user_id, CONCAT(user_first_name, ' ', user_last_name) as full_name ";
     $sql .=" FROM ".TBL_USERS." WHERE user_first_name REGEXP '^$param' OR user_last_name ";
      $sql .=" REGEXP '^$param'";    
    }

    $gDb->Query( $sql );
    $data = $gDb->FetchArray(); 

    $response = json_encode($data);
    echo $response;

    die;        
  }
?>

そして、「ash」という単語を入力すると、firebug コンソールの応答メニューに表示される json 応答値が表示されます。

[{"user_id":"324ded2773c6fadafb0d927addf815db","full_name":"Ashish katewa "},{"user_id":"4c11f67998e31610ff846e28896db538","full_name":"ashish kumar sharma "},{"user_id":"6dd8086fa23bad37580fe55f35509277","full_name":"ashok sharma "},{"user_id":"6ee2a24ca0b81e43100c70235822f48a","full_name":"ashish meena "},{"user_id":"7d15792ada9e5307288fa10cc62b36b9","full_name":"ashish "},{"user_id":"9a212d29e04391f271b924432c5d6c27","full_name":"ashish sharma"},{"user_id":"9def02e6337b888d6dbe5617a172c18d","full_name":"Ashutosh Modi"},{"user_id":"ac074cfba36cddf865ead8bfe0dd2075","full_name":"ashish "},{"user_id":"aedcb718a9b4c9fc0a1aa5331956371a","full_name":"ashok jangir "},{"user_id":"d3c1ac9ac08da86e73258a11a43251af","full_name":"Ashok kumar mehra"}]

上記の応答から、フィールド full_name の値のみを提案として表示したいと思います。ユーザーが提案された値の 1 つを選択すると、選択した user_name に関連付けられた user_id を隠しフィールドに格納する必要があります。この点について誰か助けてもらえますか?事前に感謝します。この質問についてもっと知りたい場合は、同じことを提供できます。

4

1 に答える 1