Using Flexbox without autocomplete function?

Jan 8, 2010 at 11:13 AM

Hi there,

I just discovered Flexbox, checked out the demos and studied its options, this plugin looks really very promising. From that I am not sure whether the following 'use case' (to say so) is possible to be implemented:

My need in a project is to have a simple suggestion box which however does no perform any autocomplete.

My use case is that there are some text input fields into which the user needs to enter some text. However, in 80% of the cases, the text entered is one of the (let's say) 5 most commonly used strings. Only in 20% of the cases there's a custom text to be typed in there. As the forms are rather big (many text fields to be edited), a FlexBox-kind user interface is highly preferred over a combination of radio buttons and separate text field (or so).

Example: taking a simple real example from the forwarding business: there's a "freight terms" text field. The user would in 90% choose one of the following 4 values: "freight prepaid", "freight collect", "at origin", "at destination". So for those 90% of the cases the user wishes to choose it instead of typing it (often again). For the remaining 10% of the cases, the user can type anything he wants.

So I am in search for providing the user a FlexBox-like solution, i.e. regular text field combined with a pull-down menu:

  • If the user starts typing a text by itself, the whole Flexbox would do nothing particular more than be a normal text box.
  • Alternatively, the user may choose one of the pre-defined values from the associated pull-down menu. The selected text would then as usual be put into the text field. Either it replaces the previous string in the text field (if any), or would append it to the end.
  • in the pull-down menu however, there shouldn't occur any autocomplete at all, i.e. at any times all values should appear in the pulldown menu. This is of relevance if the user has unintentionally already started typing something.
  • the pull-down menu appears only upon user click on it.

It seems to me that FlexBox would be very suitable for this sort of scenario, by setting the following FlexBox options:

  • showArrow: true
  • showResults: false
  • maxVisibleRows: 0 (the low number of suggestions will not need any paging or the like)
  • autoCompleteFirstMatch: false
  • minChars: 999 (so the box never starts autocompleting itself)
  • onSelect: function() {} that appends the chosen text to the previously typed string
  • but how can I inhibit the automplete feature at all? (or is this covered by setting minChars to a high enough value?)

Sorry for the long explanation - thanks in advance for your feedback!

Best regards, RAPHAEL