jQuery-UI scrip does not work because of wrong Ajax parameter names 'id' and 'text' about pugxautocompleterbundle

[vctls]

Ok, found the answer here:
http://stackoverflow.com/questions/4234455/jquery-autocomplete-not-working-with-json-data

When using jQuery-UI, the id and text parameters in the JSON search template must be changed to value and label, like this:

[{% for author in authors -%}
    {{ {value: author.id, label: author.__toString}|json_encode|raw }}
    {%- if not loop.last %},{% endif -%}
{%- endfor %}]

[vctls]

Oh, and by the way: the search parameter sent in the ajax request is term form jQuery-UI, instead of q, so that must be changed as well in the controller:

$qs = $request->query->get('term');

[vctls]

Actually, this issue breaks the autocompleter-jqueryui.js script.
The select callback from the autocomplete method should read

$this.val(ui.item.value);

instead of

$this.val(ui.item.id);

[garak]

I tried it, but I'm getting the id of the selected option, not its label.
Indeed, I also tried with $this.val(ui.item.label); instead of $this.val(ui.item.value);, but I keep getting the value 😞

[vctls]

Did you change the template?

[garak]

I changed search.json.twig, using the content you mentioned above (value instead of id and label instead of text)

[vctls]

That's weird. I don't remember changing anything else. I just tried on the demo project and it worked.
Should I push or copy the code somewhere?

[garak]

I'm trying using https://github.com/garak/AutoCompleterSandbox, where I altered search.json.twig (as mentioned above) and changed by hand autocompleter-jqueryui.js in vendor (as you suggested).
You can swap to jquery UI by pasasing jqui=1 in "new" page (e.g. /new-book?jqui=1)

[vctls]

Just to be sure: what is the expected behaviour?
With jQuery-UI, the field is a text input, so I understand we're using the hidden field to store the ID, while the "fake" input, on which the autocompleter is called, is supposed to display the text value?
Is that right?

[garak]

Yes

[vctls]

Got it.
You need to preventDefault() on the select event.

$fakeInput.autocomplete({
	source: settings.url_list  + "?jqui=1",
	select: function (event, ui) {
		event.preventDefault();
		// Set the real hidden input to ID number.
		$this.val(ui.item.value);
		// Set the fake input value to the corresponding text value.
		$(this).val(ui.item.label);
		if (settings.on_select_callback) {
			settings.on_select_callback($this);
		}
	},
	minLength: settings.min_length
});

[garak]

It's even worse: it's not updating value at all 😞

[vctls]

Huh. This is confusing. Let me clean this up a bit...

[garak]

OK, the "new" action is working for me now. Now I miss the "edit" action, where I see the id of the numeric id of the author, instead of the name

[vctls]

Found it:
There's a small difference between autocompleter-select2.js and autocompleter-jqueryui.js:

// autocompleter-select2.js
$.ajax({
	url: (settings.url_get.substring(-1) === '/' ? settings.url_get : settings.url_get + '/') + $this.attr('value'),
	success: function (name) {
		val = name;
		$fakeInput.select2('val', name);
	}
});

// autocompleter-jqueryui.js
$.ajax({
	url:     settings.url_get + $this.val(),
	success: function (name) {
		$fakeInput.val(name);
	}
});

Change the url parameter and everything works as expected.