6 Replies Latest reply on Apr 28, 2011 11:24 PM by Ankur Arora

    Dynamic lookup using flex?


      Hi Folks -


      You know when you are typing a string in a search engine and as you type, options that match what you've typed so far appear in a box below the input field?  I'm trying to recreate that kind of funtionality using flash/flex.  Ideally, a keyup/press event would query the back end and have new data returned, which would populate the box with appropriate data.


      I'm new to flex and don't know much about mxml.  This could very well be something that is achieved easily, but I don't even know where to start.  Does anybody know how I could achieve something like this on the front end?  I'm not so concerned about the data and where it's coming from than how to make the UI part.


      Any help would be great!

        • 1. Re: Dynamic lookup using flex?

          What you want to do is relatively simple but involves a few steps. Querying the back-end everytime you type a character can get expensive. If the dataset you need to filter is small enough then you can load it into the client side and do the filtering there:


          1) Get your data from the backend and store it in an arrayCollection, etc., on the client side.

          2) Bind the dataset to a datagrid to display in the user interface.

          3) Write a filterfunction for the dataset that will search for the substring you type in, within the dataset.

          4a) Use the "change" event for a TextInput to trigger the filterfunction (everytime you type a character, the dataset will get filtered.)

          4b) Call refresh on the dataset to reload the view with the "filtered" data - this should be done in the handler for the change event, after filter is applied.



          I hope that helps.

          1 person found this helpful
          • 2. Re: Dynamic lookup using flex?
            JeffryHouser Level 4

            This is called AutoComplete.  If you google there a a bunch of AutoComplete components out there.


            My favoriate is; selfishly; the Flextras AutoCompleteComboBox.  Our Spark version is available for use in production systems at no cost; and it is available as part of our developer edition.


            We actually have a sample with our MX Version that calls a remote service with every keypress.  Check it out here.

            1 person found this helpful
            • 3. Re: Dynamic lookup using flex?
              blizzam Level 1

              Thanks guys these are both very helpful.  The data I'm looking at could be 40,000+ records so i'm not *entirely* sure I want to load it all into the client side at first.  I'll have to mess around and see how slow it really is to query for data on each change event.


              I understand the concepts presented in the man

              • 4. Re: Dynamic lookup using flex?
                blizzam Level 1

                I'm trying to wrap my head around the idea of dynamically loading data based on what has been typed into the text box.  How would that work?  Can the dataprovider for a field be updated after the field has been generated?

                • 5. Re: Dynamic lookup using flex?
                  ScalaEnthusiast Level 1

                  I think the challenge is in figuring out when to do the request for search to the backend. If you have fast turnaround time, you can probably send a new request each time the user types a character and bring back the results for it as they type - that may be overkill though. if this is the way you do it, then your filtering is done before it returns from the server. For performance reasons, you may wish to use a stored procedure in the database that does a regular expression search on your data ( only search the columns you have to.)


                  As for getting the data back: In the result handler, the function you specify [in the remote method call] to load the returned data into the local dataprovider, you could simply have it clear the dataprovider re-populate it and call refresh() on the dataprovider each time. I am not sure how that would appear to the user as it again depends on turnaround time from the backend, size of the dataset, etc.


                  I hope this gives you an idea at least. Without knowing more about your application and how it is architected, it is difficult to provide any "reasonable" recommendation. It is an interresting problem and one that sounds like fun to solve - of course, I am not sitting there with management breathing down my neck either.

                  • 6. Re: Dynamic lookup using flex?
                    Ankur Arora Level 1

                    I would probably do it in a little different manner. Everytime a change event occurs I will post it to the backend files and limit my resultset to some maximum number so data should be downloaded fast as well as I would make indexes of those resultset in local machine so next time if a user uses same machine to search something we should have fast data fethched up from local machine only.


                    Now, putting up a pagination concept would allow to load the data fast and once that data is loaded I will keep fetching other relevant data and keep adding it to current dataprovider. So when user click or see more results they should have them.


                    I know a little tricky concept but if you see FB they do the same thing on user's wall.


                    I hope that helps.



                    Ankur Arora