Combobox – Justin Cooney

Editable Select lists are a useful feature offered by JQuery through the JQuery-Ui ComboBox widget.

In an earlier article I explained how to set up a basic JQuery ComboBox widget, which I will expand on in today’s article.

So what is this article about? Bottom line is that I wanted to create something that looks like the above image, except that I wanted the duplication area to remain hidden when the form was to be submitted. How it should work is that as a user either types into the editable select list, or selects a value from the list of options, the text entered/selected should immediately be duplicated to a hidden area. For demonstration purposes, though, I have left the duplication area visible so that you can see the logic in action.

Continue reading “JQuery Editable Select List – How to Duplicate the Value into a Text Box as it is Being Entered” →

Combobox, JQuery, Programming

Create and Style an Editable Select List Using a JQuery Combobox

2012-02-14 Justin Cooney

: JQuery Combobox

By default there is no HTML control that can act as both a dropdown list and an editable input area. The best resource to create such a control is the JQuery Combobox widget.

Overview

HTML and Web-based controls can cause confusion for users who are accustomed to using Windows applications. Often the look of Web-based controls is similar to the Windows-based equivalent, but then the behavior of the HTML control is sufficiently different to cause confusion with the user.

Case in point: drop-down lists in a Windows-based application often allow a user to either select from a list of options, or to enter free-form text themselves. There is no real equivalent for this on the Web which basically combines the functionality of a free-form text area with a select list.

Continue reading “Create and Style an Editable Select List Using a JQuery Combobox” →