How to create a search auto-complete in livecode?

[lemodizon]

Hello everyone,

Good day.

Can you help me how to create a auto complete in a search field? I created one but it's not auto complete.

here's my code my problem in this code is when I type the first letter it will prompt found customer name hope you can help revise my code thanks.

Code: Select all

on mouseUp tbutton
   local tFindName
   if tbutton <> 1 then
      exit mouseup
   else
      if  fld "findName" is empty then
         Answer "Please type the name of the customer"
      else
         put fld "findName" into tFindName
         dispatch "FindLine" to grp "dgSBCustList" of cd "cd_SBCustOrders" of stack "SBCustOrders" with "cName", tFindName
        
         put the result into tLineNumber
         if tLineNumber is 0 then
            beep
            answer  error "No customer name found!" 
         else
            beep
            answer info "Customer Name found its in the line" && tLineNumber && "of the datagrid!" 
            set the dghilitedlines of grp "dgSBCustList" of cd "cd_SBCustOrders" of stack "SBCustOrders" to tLineNumber
            --set the dghilitedlines of grp "dgSBCustList" of cd "cd_SBCustOrders" of stack "SBCustOrders" to (the num of lines of tLineNumber)
         end if
         
         
      end if
   end if
end mouseUP

[stam]

Hi lemodizon,

This is what I do - it may or may not suit you, but it's quick and easy.

First of all: I store the full data of the data grid into a custom property of the datagrid itself, as soon as I populate the datagrid (i.e. outside of any search/filter actions):

Code: Select all

set the allData of me to the dgData of me

When searchging, I filter the datagrid rather than find a line - it's just quicker. This is the type of handler I will put in the stack script, so I can use with any datagrid:

Code: Select all

command filterGrid pText, pKey, pDataGridLongID
    local tArray
    if pText is empty then 
        // no text in search field -> show all data, ie clear field to show all data
        set the dgData of pDataGridLongID to the allData of pDataGridLongID
    end if
    
    put the dgData of pDataGridLongID into tArray
    filter elements of tArray where each [pKey] contains pText 
    set the dgData of pDataGridLongID to tArray
end filterGrid

then in the filter field:

Code: Select all

on textChanged
    filterGrid the text of me, "name", the long id of "<datagridToFilter>"
end textChanged

The result is that as the user types, the data in the grid is restricted to the values that match the query. If you clear the search field, all data is shown.

As I said, that's what I do (please note I wrote this handler off the top of my head and may contain errors as not checked - but this is what I do frequently).
It is possible to search for the line and highlight it, but you then have to scroll the datagrid to show the highlighted line etc, just more work.
I find filtering suits my needs and is easier - maybe you'll find it helpful too...

Note: this can be used find with data grids just fine, even though the indexes may be random numbers not starting from 1. However as polygrid and polyList expect 1-based sequential numbering of the indexes, so if using with those, you'll need to re-number the indices.

Regards
Stam

[lemodizon]

Hi lemodizon,

This is what I do - it may or may not suit you, but it's quick and easy.

First of all: I store the full data of the data grid into a custom property of the datagrid itself, as soon as I populate the datagrid (i.e. outside of any search/filter actions):

Code: Select all

set the allData of me to the dgData of me

When searchging, I filter the datagrid rather than find a line - it's just quicker. This is the type of handler I will put in the stack script, so I can use with any datagrid:

Code: Select all

command filterGrid pText, pKey, pDataGridLongID
    local tArray
    if pText is empty then 
        // no text in search field -> show all data, ie clear field to show all data
        set the dgData of pDataGridLongID to the allData of pDataGridLongID
    end if
    
    put the dgData of pDataGridLongID into tArray
    filter elements of tArray where each [pKey] contains pText 
    set the dgData of pDataGridLongID to tArray
end filterGrid

then in the filter field:

Code: Select all

on textChanged
    filterGrid the text of me, "name", the long id of "<datagridToFilter>"
end textChanged

The result is that as the user types, the data in the grid is restricted to the values that match the query. If you clear the search field, all data is shown.

As I said, that's what I do (please note I wrote this handler off the top of my head and may contain errors as not checked - but this is what I do frequently).
It is possible to search for the line and highlight it, but you then have to scroll the datagrid to show the highlighted line etc, just more work.
I find filtering suits my needs and is easier - maybe you'll find it helpful too...

Note: this can be used find with data grids just fine, even though the indexes may be random numbers not starting from 1. However as polygrid and polyList expect 1-based sequential numbering of the indexes, so if using with those, you'll need to re-number the indices.

Regards
Stam

Hi Stam,

Good day.

Thanks for helping me out

This is my first time using the custom properties

I tried your code when i type the name my datagrid display nothing

i upload the sample file I don't know if I followed your instruction correctly.

Find.rar

(7.48 KiB) Downloaded 109 times

thank you for checking

[stam]

Sorry my fault... I wrote code off the top of my head at work, and couldn't test it, and haven't had a chance to look at it sooner...

The problem is when field is empty, the handler does not exit after setting the dgData to the allData of the group.
it needed an 'exit handler' statement within the if block, or the rest of the code could be in an else block - otherwise the rest of the code executes and of course leads to an empty datagrid.

In other words the filterGrid command should be:

Code: Select all

command filterGrid pText, pKey, pDataGridLongID
   local tArray
   if pText is empty then 
      // no text in search field -> show all data, ie clear field to show all data
       set the dgData of pDataGridLongID to the allData of pDataGridLongID
       exit filterGrid    # this was the offending omission
   end if
   put the dgData of pDataGridLongID into tArray
   filter elements of tArray where each [pKey] contains pText 
   set the dgData of pDataGridLongID to tArray
end filterGrid

or alternatively:

Code: Select all

command filterGrid pText, pKey, pDataGridLongID
    local tArray
    if pText is empty then 
        // no text in search field -> show all data, ie clear field to show all data
        set the dgData of pDataGridLongID to the allData of pDataGridLongID
    else
        put the dgData of pDataGridLongID into tArray
        filter elements of tArray where each [pKey] contains pText 
        set the dgData of pDataGridLongID to tArray
    end if
end filterGrid

I quick test with your stack seems to work with either variation - let me know.

regards
Stam

[lemodizon]

Sorry my fault... I wrote code off the top of my head at work, and couldn't test it, and haven't had a chance to look at it sooner...

The problem is when field is empty, the handler does not exit after setting the dgData to the allData of the group.
it needed an 'exit handler' statement within the if block, or the rest of the code could be in an else block - otherwise the rest of the code executes and of course leads to an empty datagrid.

In other words the filterGrid command should be:

Code: Select all

command filterGrid pText, pKey, pDataGridLongID
   local tArray
   if pText is empty then 
      // no text in search field -> show all data, ie clear field to show all data
       set the dgData of pDataGridLongID to the allData of pDataGridLongID
       exit filterGrid    # this was the offending omission
   end if
   put the dgData of pDataGridLongID into tArray
   filter elements of tArray where each [pKey] contains pText 
   set the dgData of pDataGridLongID to tArray
end filterGrid

or alternatively:

Code: Select all

command filterGrid pText, pKey, pDataGridLongID
    local tArray
    if pText is empty then 
        // no text in search field -> show all data, ie clear field to show all data
        set the dgData of pDataGridLongID to the allData of pDataGridLongID
    else
        put the dgData of pDataGridLongID into tArray
        filter elements of tArray where each [pKey] contains pText 
        set the dgData of pDataGridLongID to tArray
    end if
end filterGrid

I quick test with your stack seems to work with either variation - let me know.

regards
Stam

Hi Stam,

Good day.

It's working thank you very much stam.

I will review and study the code you gave to me.

I just want to ask how can i display the name stored in custom properties in datagrid again coz when the field is empty the name in the datagrid also empty see the picture below

Code: Select all

set the allData of me to the dgData of me

Where will i put this code coz I tried to put in the stack script and handler nothing happens but when i tried in the message box it runs.

thanks stam

[stam]

Hi Lemodizon,
Im not sure what you’re asking, but the line

Code: Select all

Set the allData of <datagrid> to the dgData of <datagrid>

should follow immediately the line where you populate the DG from your database.

You can review the array allData’s contents in the data grid’s property inspector.

Regards
Stam

[lemodizon]

Hi Lemodizon,
Im not sure what you’re asking, but the line

Code: Select all

Set the allData of <datagrid> to the dgData of <datagrid>

should follow immediately the line where you populate the DG from your database.

You can review the array allData’s contents in the data grid’s property inspector.

Regards
Stam

Hi Stam,

Good day.

This is now working

Thank you very much

[stam]

This is now working
Thank you very much

Glad to hear that lemodizon
It's a simple technique and easy to implement.

As mentioned it is possible to scroll to the found record, but it's more work, so although I've done that on some project previously, I usually will filter like this... (because deep down I'm lazy - and that's why we create apps )

Stam

[lemodizon]

This is now working
Thank you very much

Glad to hear that lemodizon
It's a simple technique and easy to implement.

As mentioned it is possible to scroll to the found record, but it's more work, so although I've done that on some project previously, I usually will filter like this... (because deep down I'm lazy - and that's why we create apps )

Stam

Hi Stam,

yes, simple technique and very effective.

I like it Thanks for sharing your knowledge in livecode.