Question

I am trying to combine ajax request with an autocomplete function. But it seems something is wrong for the autocomplete. I am using this to implement my code.

The console gives me back something like : http://domain.com/[%22...array from ajax here]?term=What i put in my input pointing a 403 error -.-

I am a bit lost though it seemed simple to me.

  <script type='text/javascript'>
      $("input[name=search]").on('keyup', function(){
         jQuery.ajax({
           type: 'POST', // Le type de ma requete
           <?php echo "url: '".PTC.ROOT.DS."ajax'"; ?>, // URL to call (works)
           data: {
             search: ''+$("input[name=search]").val()+''
           }, 
           success: function(data, textStatus, jqXHR) {

             window.availableNames = data; //JSON format
             $(function() {
              alert(window.availableNames); //Show the JSON encoded table with the right result.

              $("input[name=search]").autocomplete({source: window.availableNames}); // Fails.
             });
           },
           error: function(jqXHR, textStatus, errorThrown) {
           }
         });
      });
      </script>

Thank you

EDIT : Separately Ajax works, and Autocomplete works. But when I try to incorporate the second in the first, it doest.

Answer 1

Autocomplete has the option to provide an url as the source-parameter

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead the request parameter “term” gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.

So make sure the api endpoint located at the supplied url returns json and reacts correctly to the ‘term’ parameter.

This way you don’t have to fiddle with your own ajax calls.

So you autocomplete code would look something like this:

$("input[name=search]").autocomplete({source: '<?php echo PTC.ROOT.DS."ajax"; ?>'});