how to add jquery autocomplete to wordpress

Question

I a trying to add Jquery autocomplet to wordpress. I have a working jquery ajax search which get the users name.

I would like to do it with autocomplet. I notice that we need to use jason to passe data.

Can someone direct me to correct way to do this. Here is header.php

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/></script>

Here is the javascript I try to implement.

  $("#searchbox").keyup(function(e){
        e.preventDefault();
        var search_val=$("#searchbox").val(); 
        $.ajax({
            type:"POST",
            url: "./wp-admin/admin-ajax.php",
            data: {
                action:'wpay_search', 
                user_name:search_val
            },
            success:function(data){

                //if(data==""){
                //  return false;
                //}
                $('#search_result').html(data);
            }
    });   
});

Here is the php code in the wordpress plugin

function wpay_search() {

    global $wpdb;
    $name=$_POST['user_name'];
    $employee=$wpdb->get_results("SELECT First_Name FROM table_list WHERE First_name LIKE '$name%' ");

    foreach($employee as $key=> $value){

     echo '<ul>';
     echo '<li>'.$value->First_Name;'</li>';
     echo '</ul>';
  //   echo $value->post_content;

   }

    //wp_reset_query();
    die();
} // end theme_custom_handler
add_action( 'wp_ajax_wpay_search', 'wpay_search' );
add_action( 'wp_ajax_nopriv_wpay_search', 'wpay_search' );

In the jquery autocomplet example I found this

$( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });

Here I don't have clear idea how to passe data into source since I use wordpress. How to do this?

1: Which part of your php code accepts a JSON request and can reply with JSON response ? 2: in your source property of autocomplete you can specify a callback function like this function(request,response){} from jquery docs: jqueryui.com/autocomplete/#remote-jsonp — rusln
– rusln, Commented Jun 25, 2013 at 15:48

wordpressm · Accepted Answer · 2015-03-24 23:12:26Z

1

After I encode the strings with json, I could fix this issue.

answered Mar 24, 2015 at 23:12

wordpressm

3,2973 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add jquery autocomplete to wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related