7 Replies Latest reply on Aug 1, 2007 2:27 PM by Newsgroup_User

    Advanced Combobox.

    Level 7
      Can anybody point me to examples, how-to's, downloads on how to create
      an advanced comboBox where the user can type in a value and the existing
      values are filtered and matched to what is typed until an existing value
      is selected and|or a unique value is entered.

      Does that make sense? I'm looking for the standard desktop type combo
      box that tries to best match an existing value before accepting a new value.
        • 1. Re: Advanced Combobox.
          Level 7
          Ian Skinner wrote:
          > Can anybody point me to examples, how-to's, downloads on how to create
          > an advanced comboBox where the user can type in a value and the existing
          > values are filtered and matched to what is typed until an existing value
          > is selected and|or a unique value is entered.
          >
          > Does that make sense? I'm looking for the standard desktop type combo
          > box that tries to best match an existing value before accepting a new
          > value.

          I have a primitive example that demonstrates somewhat what I am looking
          for. This works crudely. The comboBox blinks very obviously with every
          key stroke, I presume because of the refresh(). It would also be nice
          if the default selection was the first item in the dataProvider, but
          with the ability to override this with a new value if necessary.

          [Bindable]
          private var comboFilterStr:String = new String();

          ...

          private function comboFilter(o:Object):Boolean
          {
          return comboFilterStr.toUpperCase() ==
          o.substr(0,comboFilterStr.length).toUpperCase() ;
          }

          private function test(ctrl:ComboBox):void
          {
          comboFilterStr = ctrl.text;
          ctrl.dataProvider.filterFunction = comboFilter;
          ctrl.dataProvider.refresh();
          ctrl.open();
          }

          ...

          <mx:ComboBox
          id="te_application" change="test(te_application)"
          prompt="Select Application"
          width="100%"
          rowCount="5"
          dataProvider="{applicationsAry}"
          editable="true"/>



          • 2. Re: Advanced Combobox.
            ntsiii Level 3
            Have you seen the "AutoComplete" component on Flex Exchange?
            Tracy
            • 3. Re: Advanced Combobox.
              Level 7
              ntsiii wrote:
              > Have you seen the "AutoComplete" component on Flex Exchange?
              > Tracy

              Not until today. That is definitely very close to what I am looking
              for. There are two issues with it for my purpose. The first, optional
              issue, is it would be nice if it was based on a comboBox instead of a
              text box, so that the user could open the list and select an item as
              well as type it in. The second issue is a deal breaker though. I need
              the control to allow input that is not in the list. I want to present a
              best match to encourage users to select existing values when available.
              But if no match is found they need to be able to enter a new value.

              Anybody know of controls that include this functionality and|or provide
              insight on how to modify this one?
              • 4. Re: Advanced Combobox.
                Level 7
                I have experimented a bit more with this, and one can add a new value
                but only if it is not a sub-string of a value in the dataProvider list.

                So I wonder how hard it would be to modify this?
                • 5. Re: Advanced Combobox.
                  levancho Level 3
                  I have used open source autocomplete widget by sho kuwamoto,
                  it is very decent actualy its pretty nice.
                  even though its still in beta it works very well for me plus you can easily modify src to fit your needs,
                  http://kuwamoto.org/2006/05/11/example-code-updated-for-beta-3/
                  • 6. Re: Advanced Combobox.
                    Level 7
                    This is so close I can smell it. I have been tweeking the AutoComplete
                    custom control suggested earlier in this thread. It is 95% there. I
                    would probably like to change how the enter key works to make it work
                    like the up arrow currently works. But I will save that exercise for
                    another day.

                    My last issue to have this functional is that the AutoComplete control
                    remembers the item selected from one viewing to another. This is
                    problematic, but I have no idea how to mitigate this behavior.

                    <Ctrl:AutoComplete
                    id="te_application"
                    selectedItem="{troubleLogEntry.application}"
                    rowCount="5"
                    lookAhead="true"
                    dataProvider="{applicationsAry}"/>

                    This is used in a form control that does both add and update functions.
                    For the update use case I set the selectedItem to the associated
                    property value of the data object to which this form is tied. For the
                    add use case, I create a new troubleLogEntry data model, thus all
                    properties are empty strings. I presume since there is no empty string
                    value in the AutoComplete dataprovider source array to which match the
                    selectedItem, its previous state is maintained showing the last value
                    selected with the control. I need it to reset to no value selected,
                    i.e. have a selectedIndex of -1. Any ideas on how I can achieve this
                    result?

                    TIA
                    Ian Skinner
                    • 7. Re: Advanced Combobox.
                      Level 7
                      I believe I have this working as desired by setting the AutoComplete's
                      'typedText' property to an empty string when initializing the form for
                      the add use case.