how to make auto completer work with Jquery UI -

i trying use autocomplete, ajax call work when use out side auto completor. following code doesnt work. how set data source properly?

$("#searchbox").autocomplete({ source: [{          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) {         //$('#search_result').html(data);         return data;          }     });  }] }); 

i think easier way pass in callback function source, more flexible , suited trying accomplish. according jquery ui documentation:

the callback gets 2 arguments:

• a request object, single term property, refers value in text input. example, if user enters "new yo" in city field, autocomplete term equal "new yo".

• a response callback, expects single argument: data suggest user. data should filtered based on provided term, , can in of formats described above simple local data. it's important when providing custom source callback handle errors during request. must call response callback if encounter error. ensures widget has correct state.

looking @ code, might like:

$("#searchbox").autocomplete({         //define callback function        source: function(request, response) {                    $.ajax({                         datatype: "json",                         url: "./wp-admin/admin-ajax.php",                         data: request,                         success: function(data) {                                    //create array response objects                                      var acterms = [];                                       //process response , add array                                      $.each(data,function(i,val){                                                                         acterms.push(val.username);  //whatever username property                                    });                                       //pass array response callback                                      response(acterms);                      });         });  }); 

your php script use "term" property on request object sent data in order retrieve appropriate results , echo resulting json, handled success callback.

there tutorial on using function callback source @ how use jquery ui autocomplete widget.

update:

i went , realized easier method handle ajax request pass in string source callback pointing url of script.

jquery ui documentation states:

• when string used [as source type], autocomplete plugin expects string point url resource return json data. can on same host or on different 1 (must provide jsonp). autocomplete plugin not filter results, instead query string added term field, server-side script should use filtering results. example, if source option set "http://example.com" , user types foo, request made http://example.com?term=foo. data can in same format local data described above.

your code changed to:

$("#searchbox").autocomplete({         //define callback function        source: "./wp-admin/admin-ajax.php"  }); 

you have handle term passed in request ($_get["term"]) in php script. since script returns string encoded in json format, assuming json formatted, autocomplete feature should populate correctly.