2017-04-11 20 views
2

jqueryとWordPress関数を使って自動挑戦リストを作成しました。私の自動訴訟はうまくいきます。私はここに私のコードを与えているajax with jquery ui autocomplete

のjQueryコード

(function ($) { 
    $(document).ready(function() { 
     $('#my_ajax').autocomplete({ 
     // minChars: 1, 
     source: function(request, response) { 
      $.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: devel_ajax.ajaxurl, 
      data: 'action=my_ajax'+'&name='+request.term, 
      success: function(data) { 

       response($.map(data, function(item) { 
        return { 
         label: item.title, 
         value: item.title 
        } 
       })); 

      } 
      }); 
     }, 
     minLength: 3, 


    }); 

})(jQuery); 

PHPコード

function user_autocomplete($value){ 
     global $wpdb; 
     $name = $wpdb->esc_like(stripslashes($value)); 
     $users = $wpdb->get_results("SELECT DISTINCT 
     $wpdb->users.ID 
     FROM $wpdb->users 
     WHERE LOWER($wpdb->users.user_login) LIKE LOWER('".$name."%')"); 
     $autocomplete = array(); 
     foreach($users as $key => $user){ 
      $user_info = get_userdata($user->ID); 
      $firstname = $user_info->first_name; 
      $lastname = $user_info->last_name; 
     if(!empty($firstname) || !empty($lastname)){ 
      $username = ucfirst($firstname) . ' '. ucfirst($lastname); 
     }else{ 
      $username = $user_info->user_login; 
     } 
     $email = $user_info->user_login; 
     $website = $user_info->website; 
     $autocomplete[$user->ID] = array(
     'ID' => $user->ID, 
     'Name' => $username 
     'email' => $email 
     'website' => $website 
     ); 
    } 
    return $autocomplete; 
    } 

HTMLコード

<form action='' method='POST' role="form" class="bottom-space"> 
<div class="form-group"> 
    <input id="my_ajax" autofocus="" value="" type="text" name="q" placeholder="my_ajax" style="width:100%;max-width:600px;outline:0" autocomplete="off"> 
    <input id="firstname" name="firstname" type="hidden" value=''> 
    <input id="lastname" name="lastname" type="hidden" value=''> 
    <input id="id" name="user_id" type="hidden" value=''> 
    <input id="email" name="email" type="hidden" value=''> 
    <input id="website" name="email" type="hidden" value=''> 
</div> 
<submit type="submit" class="btn btn-default">Submit 
    Button</submit> 

</form> 

しかし、私は他の隠れた入力フィールドを設定できません。どのような助けや示唆も高い評価を得ています。

+0

多分http://api.jqueryui.com/autocomplete/#event-responseは、これは本当にJSの質問ではなく、ワードプレスの一つであり、あなた – Slavik

+0

役立ちます。 –

答えて

4

コードはテストされていません。しかし、私はこれがあなたのために働くべきだと思います。私はあなたにいくつかのコードスニペットを与えています。

(function ($) { 
    $(document).ready(function() { 
     $('#my_ajax').autocomplete({ 
     // minChars: 1, 
     source: function(request, response) { 
      $.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: devel_ajax.ajaxurl, 
      data: 'action=my_ajax'+'&name='+request.term, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var object = new Object(); 
        object.label = item.Name; 
        object.value = item.Name; 
        object.ID = item.ID; 
        object.email = item.email; 
        object.website = item.website; 
        return object 
       })); 
       // response($.map(data, function(item) { 
       //  return { 
       //   label: item.title, 
       //   value: item.title 
       //  } 
       // })); 

      } 
      }); 
     }, 
     select: function (event, ui) { 
      $("#my_ajax").val(ui.item.value); 
      $("#firstname").val(ui.item.value); 
      $("#id").val(ui.item.ID); 
      $("#email").val(ui.item.email); 
      $("#website").val(ui.item.website); 
     } 
     }); 

    }); 

})(jQuery); 
+0

私に正しい方法を教えてくれてありがとう。 –