Forum | Appery.io

I think you will need to include this library in your external resources - User defined resources.
http://code.jquery.com/ui/1.10.3/jque...

And at the simplest all you'd need to add an autocompete is this - in the success event of the list service you just need this JS code

code
var arrBrands = [];
$(data).each(function(){
arrBrands.push($(this)[0].Brand);
});

Appery("mobiletextinput_2" ).autocomplete({
source: arrBrands
});
/code

Perhaps to refine stuff you may want to disable the autocomplete in the Before send event and enable it onces data has been populated successfully. But at the least the above should work.

M&M,

Thanks for your reply quick question though, I am looking at the code and wondering what is the .Brand

Those are some vehicle names that I used for testing...in your case it should be .keyword I guess. In short the value that you'd be using for your autocomplete

And ya I did use this bit of CSS to beautify the result

code
.ui-helper-hidden-accessible{
display:none;
}

ul.ui-autocomplete{
background-color:#fff;
z-index:3;
}
// Courtesy: Maryna
/code

So you may need that as well.

OK I think autocomplete has officially kicked my butt and I need help..Here is what I have done.

1) I have list service that runs on page load
2) On success event I save all the results in a LSV called Traffic_offence_keyword_search
3) On same event I add JS with code

codearr = new Array();
$(data).each(function(){ arr.push($(this)[0].keyword); });
localStorage.setItem("Traffic_offence_keyword", JSON.stringify(arr));/code

4) so far my result look good when I run the app in browser I can see:
Traffic_offence_keyword_search [object Object]
Traffic_offence_keyword["drinking","vehicle","Drinking23","drunk","drinking234","drinking999","amazing","Alabama ","Alaska ","Arizona ","Massachusetts ","Maryland "," Minnesota ","New Jersey","New York"]

Note these keywords are the ones I want to work with..

5) On design view in the input of my textbox I run:
codeAppery("searchbar").autocomplete({
source: localStorage.getItem("Traffic_offence_keyword")});/code

when I type the code I get error 404 and on the source: xhr.send( ( s.hasContent && s.data ) || null );

where I am going wrong?

I also have proxy added and buch of css to cleanup things..

Anyone?

Do you want to try converting the JSON to an array? You can use the following functions

code
// jQuery
var arr = $.map(obj, function(el) { return el; });
/code

code
// Without jQuery
var arr = Object.keys(o).map(function(k) { return o[k] });
/code

Do you want to create a static array first...with some values and assign it to the autocomplete and test? Once confirmed that it is using the values from the array you can substitute it with the array you are populating from your DB.

Cheers,
M&M

And did u include the external lib i mentioned about?
http://code.jquery.com/ui/1.10.3/jque...

Yes I have included the external Lib. If you don't mind how would I go about creating a static array and then implementing it. I have been thinking of that as a plan B If this doesn't work. Also looking at my array Traffic_offence-keyword which was created from the array object does it look like it is in good format?

And I did not really understand the mapping you have done...is that a list or a select component? If you are using this service just for fetching autocomplete / keywords, you don't even need to do any mapping.

Just this piece of JS in your service Success event should do the trick

code
var arrKeywords = [];
$(data).each(function(){
arrKeywords.push($(this)[0].keyword);
});

Appery("searchbar" ).autocomplete({
source: arrKeywords
});
/code

And this code can be in the Success event. Have you split this code and used it in different events?

code
// Service Success Event
arr = new Array();
$(data).each(function(){ arr.push($(this)[0].keyword); });
localStorage.setItem("Traffic_offence_keyword", JSON.stringify(arr)); // This is just to save the return values to persistent storage for retrieval later.

Appery("searchbar").autocomplete({
source: arr }); // I have used the array directly
/code

WOW..I just made the changes as you suggested and it is working. Thank you so much I really appreciate it. One mistake I made is to put my autocomplete code inside the input event which obviously was opening a can of worms.

Do you have some cool css "tools" to edit the values in the auto complete? For example, the values are in bullet form, I would like to reduce the font as well etc...