Forum | Appery.io

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?

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.

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

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

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

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

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!

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

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.

Hi,

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