Autocomplete text fields

Getting Started Newbie Questions
#1

Hello

Can anyone help me get a code for having an autocomplete search field while searching for some data, where the data is available on a remote server in an online database?

For example:

Suppose I want to search for the Physics book containing the word “data” in its name(considering I don’t know the exact name) . So when I type the word “data” in my search field, I want the code to display the list of all the books having “data” in their names and allowing me to choose the book that I was looking for.

Thank you in advance

Shivani

#2

Hi Shivani,

Creating the “show autocomplete suggestions” part should not be too difficult. You would just need to check what the user has input each time he/she changes the value (types a key), then compare that with a list of possibilities which match.

The larger issue, by your description, would be comparing the input value with an offline/remote list. That would require doing a network transaction on every single key press by the user, and it could easily kill your performance. Is there any way you could initially download the entire “dictionary” of values and store it locally for faster access?

Brent

#3

Thank you for the help.

Will it be of any help if I fetch the the data and store it local sqlite database of the application?

Thank you in advance.

#4

Yes, that will improve performance immensely. :slight_smile:

Brent

#5

Thank you for the help.

#6

Hello,

After I save some values in my code, how do I connect those data values with the autocompletion of the text field?

Thank you in advance.

#7

The native.newTextField() generates events with each keystroke. Here is a rough pseudo code for this:

local autoCompleteTableView local function handTextfield( event )     if event.phase == "editing" then          if  autoCompleteTableView then               autoCompleteTableView:removeSelf()               autoCompleteTableView = nil          end          autoCompleteTableView = widget.newTableView({ ... })          local query = "SELECT value FROM dbtable WHERE value like 'event.text" .. "%';"          for row in db:nrows( query ) do                autoCompleteTableView:insert( ..., params = { value = row.value } )          end     end end

Of course I have no clue what your database is structured like. So “value” above is some data bit of yours. I left out all  of the non-relevant table creation code and insertion code. You will still need an onRowRender() function for the tableView etc.

I know deleting and recreating a tableView seems harsh and time consuming but its fast enough to happen in a single frame update, so its quick enough.

Rob

#8

Thanks Rob for the reply. In our database, we have book names. So when a person starts typing a book name, say the initial 2-3 characters, it should show up with a suitable number of books beginning or having those characters in them.

As Brent Sorrentino mentioned, i will fetch the values of the book names prior to performing this operation.

Now based on the book selected, I am using network.request() API function with appropriate parameters and passing the value to remote server, which fetches me with the details of that particular book. This is the basic idea. Any help will be appreciated.

Thank you in advance.

Shivani

#9

When they select the title in the tableView of search results and you get an onRowTouch() event then you can make your network.request(), fetch the full results and display them when you get the call back in listener function to gave to network.request().

Rob

#10

Thanks Rob for the reply. But it is a little complex for me to understand.

It would be really great if you could help me with some code snippet because i am new to this and the code snippet would help me learn better.

Thank you in advance.

Shivani

#11

Well it is a complex concept. It involves tableViews which requires setting up a tableView, inserting data into it, a function to draw each row and a function to handle when people touch a row. Then you have to understand what a row is (a display.newGroup) and how it relates to the display objects (mostly display.newText()'s) you are using to create each row. 

You have to understand how network.request() works, and how to handle returned data from that. You have to be able to create the display of the downloaded content. This will vary depending on if you’re using Composer or not for scene management.

This is something that just isn’t "snippet"able.

I would spend time learning about tableViews. There are multiple sample apps that use tableViews in the sample code that ships with them. There should be tutorials out there as well.

We are working on a sample project right now that does what you’re asking for. Once it’s complete it will be on our GitHub repository and you can look at that, but it’s going to be a couple of weeks probably.

Rob

#12

Hey,

Thanks Rob.

I will surely try looking into the concepts and referring some tutorials. Can you suggest any other way in which I can let my users know about what all books are available in the database and accordingly they can search for their requirement.?

Thank you in advance.

Shivani

#13

You’re on the right track. You might want to look at https://github.com/coronalabs/business-app-sample

I recently added some SQL features and input. It also has tableView examples.

Rob

#14

Hi Shivani,

Creating the “show autocomplete suggestions” part should not be too difficult. You would just need to check what the user has input each time he/she changes the value (types a key), then compare that with a list of possibilities which match.

The larger issue, by your description, would be comparing the input value with an offline/remote list. That would require doing a network transaction on every single key press by the user, and it could easily kill your performance. Is there any way you could initially download the entire “dictionary” of values and store it locally for faster access?

Brent

#15

Thank you for the help.

Will it be of any help if I fetch the the data and store it local sqlite database of the application?

Thank you in advance.

#16

Yes, that will improve performance immensely. :slight_smile:

Brent

#17

Thank you for the help.

#18

Hello,

After I save some values in my code, how do I connect those data values with the autocompletion of the text field?

Thank you in advance.

#19

The native.newTextField() generates events with each keystroke. Here is a rough pseudo code for this:

local autoCompleteTableView local function handTextfield( event )     if event.phase == "editing" then          if  autoCompleteTableView then               autoCompleteTableView:removeSelf()               autoCompleteTableView = nil          end          autoCompleteTableView = widget.newTableView({ ... })          local query = "SELECT value FROM dbtable WHERE value like 'event.text" .. "%';"          for row in db:nrows( query ) do                autoCompleteTableView:insert( ..., params = { value = row.value } )          end     end end

Of course I have no clue what your database is structured like. So “value” above is some data bit of yours. I left out all  of the non-relevant table creation code and insertion code. You will still need an onRowRender() function for the tableView etc.

I know deleting and recreating a tableView seems harsh and time consuming but its fast enough to happen in a single frame update, so its quick enough.

Rob

#20

Thanks Rob for the reply. In our database, we have book names. So when a person starts typing a book name, say the initial 2-3 characters, it should show up with a suitable number of books beginning or having those characters in them.

As Brent Sorrentino mentioned, i will fetch the values of the book names prior to performing this operation.

Now based on the book selected, I am using network.request() API function with appropriate parameters and passing the value to remote server, which fetches me with the details of that particular book. This is the basic idea. Any help will be appreciated.

Thank you in advance.

Shivani