Phpfox implement autocomplete with ajax

Question

I have this in my javascript file

$("#searchPlaces" ).autocomplete({
    source:function( request, response ) {
        $.ajaxCall('mymodule.getcities', 'startsWith='+request.term);
    },
    autoFocus: true
});

And this is in my ajax php file.

public function getcities(){
    $cities = array("1" ,"2", "3", "4");
    $this->call(json_encode($cities));
}

It returns the array as json just fine, but nothing shows up in the autocomplete field.

Would anyone know how to accomplish this task in phpfox using the ajaxCall function?

Thanks.

Answer 1

The default phpfox $.ajaxCall actually returns a jQuery jqXHR object.

So, instead of rebuilding the entire ajax call manually, one could still use phpfox's $.ajaxCall and set the autocomplete response inside the .done() promise callback:

$("#searchPlaces" ).autocomplete({
    source:function( request, response ) {
        $.ajaxCall('mymodule.getcities', 'startsWith='+request.term)
            .done(function( data ) {
                response( $.parseJSON(data) );
            });
    },
    autoFocus: true
});

Note that the $.ajaxCall ajax request uses 'script' as dataType, so you need to do your own parsing of the returned string, in this case it's a json string and $.parseJSON() will do the trick.

Answer 2

So I was able to get around the issue. The issue is autocomplete needing the response specified. ajaxCall doesn't have a real callback on success, so there is no way to set the response with the data that gets returned. I decided to go a round about way and set everything manually. This is what I came up with.

---

include\component\controller\mycontroller.class.php

$this->template()->assign(array('token' => Phpfox::getService('log.session')->getToken());

---

template\default\somehtml.html.php

<input id="security_token" type="hidden" name="phpfox[security_token]" value="{$token}" />

---

static\jscript\myjavascript.js

  $("#searchPlaces" ).autocomplete({
      source:function( request, response ) {
          $.ajax({ 
            url: "/static/ajax.php",
            minLength: 1,
            dataType: "json",
            data: {
                startsWith: request.term,
                'core[security_token]': $("#security_token").val(),
                'core[ajax]': true,
                'core[call]': 'mymodule.myfunction'
            },
            success: function( data ) {
                response( data );
            }
          });
      },
            autoFocus: true
  });

---

include\component\ajax\ajax.class.php

public function myfunction(){
        $yourdata = array("1" ,"2", "3", "4");
        $this->call(json_encode($yourdata ));
    }

---

Basically the security token is set via a hidden element. The url will always be url: "/static/ajax.php", as this will take care of calling the ajax file for you. 'core[call]': 'mymodule.myfunction' this is set to how you would use $.ajaxCall('mymodule.myfunction'). All you need to do is find the autocomplete items you want to return as normal now.

Hopefully this helps in case someone else gets in the same situation.