For help with installation, bugs reports or feature requests, please head over to our new forums.
Genuitec Community on GitHub
- This topic has 8 replies, 3 voices, and was last updated 13 years, 1 month ago by
Stu Wade.
-
AuthorPosts
-
Stu WadeMemberI would appreciate a few pointers to snippets and/or tutorials …
My problem, for a new ‘phone targetted App, is that I would like the user to type a name into a text field and if the name is recognised an autocomplete option would kick in, followed by the auto population of several associated fields – if the name is not recognised the user would then fill these fields themselves and the data would be dropped into the ‘database’ so this is a one-off action for the user.
My current thinking is to invent an object to contain the data fields and use local storage of an array of this object to act as the ‘database’. Would this be the recommended approach? Has anyone made any progress on the autocomplete function? I have searched this forum and it seems there has been mixed success.
Your ‘drag and drop’ example looked fun, CincyPlanet, but I could not locate the code …
Hoping for lots of input, guys, I suspect I shall need it 😐
June 21, 2013 at 1:52 pm #340203
support-octavioMemberHi Stu,
We will provide you a code snippet next week.
June 25, 2013 at 5:01 am #340287
RathinavelMemberHi Stu,
I had used this autocomplete option before using HTML5.
I hope the below code snippet might be useful 🙂
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>June 25, 2013 at 11:25 am #340302
support-octavioMemberHi Stu,
Take a look at this example provided by lead dev (Vadim).
It saves the current values of textfields in localstorage and pull them when the string in main textfield match with any of values saves in localstorage. Let me know if you need further assistance.Attachments:
You must be logged in to view attached files.June 26, 2013 at 1:40 pm #340343
Stu WadeMemberThanks a million guys! Have not yet had a chance to absorb the info, but I’m sure it will be just the ticket. I’m currently away, yet again, this time enjoying the food and wine of France. Retirement is a highly recommended occupation 🙂
June 28, 2013 at 6:03 am #340405
Stu WadeMemberWow!! What a wonderful bit of code!
Not quite what I had in mind, but I’m certain I can knock it into my shape – certainly shows that I have a lot still to learn about JavaScript.
Once again thank you.
Will post my modifications once they are completed and then close the thread.
July 1, 2013 at 5:40 am #340465
Stu WadeMemberI am ashamed to display my rather agricultural code next to the elegance displayed by Vadim’s snippet, but I have now achieved the desired functionality – Hoorah!
Two questions, both fairly cosmetic …
1) I was forced to use the css visibility attribute, as I could not fathom the correct syntax for the list append and pop functions – could someone please enlighten me?
2) Similarly, once a list element is selected and used by the code I would like to remove the check-mark, but again cannot come up with the correct syntax – help?
The autofill/autocomplete demo is a WebApp here: http://goo.gl/MoKDa
to best illustrate the functionality populate the storage with a number of names and associated details, but choose names starting with the same letter (e.g. ‘Stu’, ‘Simon’, ‘Sally’, ‘Steve’)
The code is attached.
Attachments:
You must be logged in to view attached files.July 1, 2013 at 6:38 pm #340485
support-octavioMemberHi Stu,
Attached your custom.js file with the modification to avoid that the listitems get the checkmark. See line #108
Let me know how it goes for you.
Attachments:
You must be logged in to view attached files.July 2, 2013 at 11:47 am #340507
Stu WadeMemberOnce again, thanks a million.
I still can’t get my head around the .append function, but aesthetically the problem is solved by simply ensuring that the last visible list entry has been given the “last” class.
Now to graft it all into my real App.
I have updated the WebApp (link above) to demonstrate this – should anyone like to see the final code, let me know and I shall re-post the .zip
Marking the thread as closed.
-
AuthorPosts
