Displaying suggestions in input box

[anelezeravla]

The app is already shared with support.
Thank you very much.

[Maryna Brodina]

Hello! Could you tell us app name?

[anelezeravla]

MyLanguageApp

[Maryna Brodina]

Thanks!

[Maryna Brodina]

Hello!
1) You have to add one of jQuery UI theme. All themes are listed here http://code.jquery.com/ui/ (see themes for 10.3). For example if you choose black-tie.in project you have to create CSS asset with the following code http://code.jquery.com/ui/1.10.3/them...
2) It's better to add jQuery UI theme not through App settings-External resources, but create new JS asset with code http://code.jquery.com/ui/1.10.3/jque...
3) In service Autocompletado settings check Use Appery.io Proxy
4) Response your Autocompletado service returns can't be directly used in autocomplete plugin. You need to form array. For example on service success event run JS code (instead that one you have now):
prevar sourceArr = data['response'].map(function(item){return item['palabra']});
var sourceArrReduced = sourceArr.filter(function(item, i){return i/pre
5) In RESTautocompletado delete mapping responce--mySuggestions
6) Invoke RESTautocompletado service on mobiletextinput_2-Input instead mobiletextinput_2-Value change
7) On Buscar page show add code:
preAppery("mobiletextinput_2").autocomplete({
source: [],
minLength: 0,
delay: 0
});/pre
8) On mobiletextinput_2-Input add one more action - Run JavaScript with the following code:
preAppery("mobiletextinput_2").autocomplete("disable"); /pre
place it before Invoke service

[anelezeravla]

Hello, Marina.
Thank you veru much for your explanation. We have followed your steps, but we still don't get the expected result. We have taken the liberty of slightly changing this part of the code you proposed:

var sourceArr = data['response'].map(function(item){return item['palabra']});
var sourceArrReduced = sourceArr.filter(function(item, i){return i

to this:

var sourceArr = data['response'].map(function(item){return item['palabra']});
alert(sourceArr);

var sourceArrReduced = sourceArr.filter(function(item, i){return i});
alert(sourceArrReduced);

With this, we reach the point in which the variable sourceArrReduced contains the items we want from the REST service response. However, in the following steps of your explanation we don't see where sourceArr or sourceArrReduced are ever connected with the UI.

Any ideas on how to continue?

Thank you very much for your help.

[Kateryna Grynko]

Hi,

Sorry, the code wasn't added. There should be the following code in Paragraph 4:
prevar maxLen = 10, i, len, response = data['response'], sourceArrReduced = [];
for (i = 0, len = response&#46;length; i < len; i++) {
if (i = maxLen) {
break;
}
sourceArrReduced&#46;push(response['palabra']);
}
Appery("mobiletextinput_2")&#46;autocomplete("option", "source", sourceArrReduced);
Appery("mobiletextinput_2")&#46;autocomplete("enable");
Appery("mobiletextinput_2")&#46;autocomplete( "search", "" );/pre

[anelezeravla]

It works beautifully now. Thank you so much for the great support!

[anelezeravla]

Hello again,
The autocomplete box is working properly when displaying suggestions, but it is not possible to click on one of the suggested options. Whenever the user tries to click, the layer with the suggestions disappears.

We would like it to display the suggestions and allow the user to click on any of them and then navigate somewhere else.

Any ideas on how to solve this?

Thank you very much

[Maryna Brodina]

Hello! We can't reproduce it. Where do you test it? Could you give us your public app link?