2

I have created an autosuggestion list using jquery and WordPress function. My autosuggestion working fine. I am giving my code here

Jquery Code

(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 Code

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 Code

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

But the problem is I can not set others hidden input Field. Any kind of help or suggestions highly appreciable.

Improve this question
2

1 Answer 1

Reset to default
6

The code is not tested. But I think this should be work for you. I am giving you some code snippet.

(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);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.