Displaying suggestions in input box

[anelezeravla]

Hello,
I am building an app that has an input box. While the user is typing on the input box, I want the app to display suggestions according to what the user is typing. Example, the user starts typing "coff..." and while he types a layer under the input box will be displayed suggesting "coffee", "coffee shop", "italian coffee", etc.

A bit like this

I already have an API that returns the suggestions I need, and I assume that is suffices to create an event on the input box so that when value changes the API will be called. My question is, how can I build this layer below the input box where the suggestions will be shown? Is there any component in appery that would allow me to do this?

[Kateryna Grynko]

Hi,

Add the third-party library jqueryUI: http://code.jquery.com/ui/1.10.3/jque...
(App Settings/External resources)

Add the following code:
codeAppery("mobiletextinput_2" ).autocomplete({
source: availableTags
});/code
where availableTags is an array of possible options,
mobiletextinput_2 is an input name.

Then you can improve the appearance of autocomplete, for example:
1) disable the hint message:
code.ui-helper-hidden-accessible{
display:none;
}/code

2) Make a list of options is always visible:
codeul.ui-autocomplete{
background-color:#fff;
z-index:3;
}/code

The following steps are up to you to choose.

[anelezeravla]

Thank you, Katya. It doesn't seem to work, though. I'll explain what I have done:

• I have added the url http://code.jquery.com/ui/1.10.3/jque... to the user defined resources in External Resources.

• I have my RESTservice that, given a string, provides a list with the autocomplete suggestions I want.

• On my page, I have an input box, called mobiletextinput_2 with an event consisting on making a call to the RESTService whenever the value in mobiletextinput_2 changes. The response provided by the RESTservice is kept in a variable called mySuggestions.

• If the REST service call is successful, another event is triggered: running JavaScript with the code you mentioned:
  Appery("mobiletextinput_2").autocomplete({
  source: mySuggestions
  });

  However, the result is that the input box is as it was before. No autocomplete suggestion layer appears. Any ideas on what the problem might be?

  Thanks a lot

[Maryna Brodina]

Hello! We're working on it. I'll update when have more information.

[anelezeravla]

Thank you very much. We are very interested in this feature!

[Kateryna Grynko]

Hi,

Probably you save a result to the localStorage variable 'mySuggestions'? Then you can use the following code to specify it:
codesource: localStorage.getItem("mySuggestions");/code

[anelezeravla]

Hello, I added tje JS you suggested, but now the page doesn't work. When I navigate to that page, it remains constantly uploading but never gets there (I don't even get to make the API call or anything; i just cant seem to execute de page).

This is the JS I've added:

Appery("mobiletextinput_2").autocomplete({
source: localStorage.getItem("mySuggestions");
});

On the browser console, I get the following error:

Uncaught SyntaxError: Unexpected token } jquery-1.8.2.js:564
(anonymous function) jquery-1.8.2.js:564
jQuery.extend.globalEval jquery-1.8.2.js:565
jQuery.ajaxSetup.converters.text script jquery-1.8.2.js:8240
ajaxConvert jquery-1.8.2.js:8125
done jquery-1.8.2.js:7764
callback jquery-1.8.2.js:8500
send jquery-1.8.2.js:8506
jQuery.extend.ajax jquery-1.8.2.js:7968
(anonymous function) jquery-1.8.2.js:5994
jQuery.extend.each jquery-1.8.2.js:611
jQuery.fn.extend.domManip jquery-1.8.2.js:5991
jQuery.fn.extend.append jquery-1.8.2.js:5764
jQuery.fn.(anonymous function) jquery-1.8.2.js:6186
$.ajax.success jquery.mobile-1.3.0.js:4359
fire jquery-1.8.2.js:974
self.fireWith jquery-1.8.2.js:1082
done jquery-1.8.2.js:7788
callback

Any clues? Thank you!

[Maryna Brodina]

Hello! There shouldn't be semicolon after presource: localStorage.getItem("mySuggestions")/pre

[anelezeravla]

Thanks. The page now loads correctly, but we still don't have the autocomplete suggestion layer as the user types on the the input box.

[Kateryna Grynko]

Hi,

Could you please share your application with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a?