Websites frequently need to change their location to an appropriate URL based on values from one or two linked lists. If you want to create a control that changes your website location based on one or two-level links, for example, state and county, you can use this control. I have tested in IE 7 and Firefox 2.0. The advantage of this solution is that all data is stored on client-side in a separate .js file, and the user doesn’t have to wait for a response from the database or other server-side storages. This storage can be filled by hand, or automatically from the database, or from XML files.
The control has a Start button. After the user clicks on it, a popup window appears (Fig. 1) with three controls: a text control and two listbox controls. The arrow button can be shown or hidden. The control offers two modes to select the needed item. The user can select a state from the first list box, counties of these states then appear in the list box below (Fig. 1). You can go to the relevant URL by double clicking the county, and then by clicking the appearing arrow button. The second (autocomplete) mode refers to cases where the user enters a letter or a word. The second listbox will be automatically hidden, and a county list for all the states appears in ascending order in the first listbox (Fig. 2). All listboxes will be hidden when the user enters insufficient data (Fig. 3). Note that the control reacts to user action immediately. The control auto-hides when the user clicks any area outside of it.
Using the code
CountySearch class provides auto-completing functionality when the user clicks the name of the state in the first list box or when letters are entered in the text box. The
Positions class gets the mouse position, calculates the offset of the mouse position and the top/left coordinates of the dragable control, calculates the current position of the dragable object. The
Drag class provides the control’s drag and auto-hide functionality. The drag functionality is realized by handling the document’s
onmousemove event. The handling function is the
MouseMove member function of the
Drag class. In this case, the dragable object is a
div tag with
maindiv”, but before dragging this object, we must activate it as dragable. This action is performed during the
OnMouseDown event of the dragable object (in this case, “
maindiv”). I attach the
OnMouseDown event to this object dynamically in the
makeDragable() function of the
this.makeDragable = function(object)
object.onmousedown = function()
self.dragObject = object;
self.mouseOffset = m_Pos.getMouseOffset(object, self.mousePos);
Auto-hide functionality: All controls inside the dragable object and the drag object itself are attached to the
onblur event handlers. When the user clicks the outside of the control, The drag object's
Focus variable controls the unfocused/focused condition. If focus do not return to the dragable object, the
timeOut function turns it off after 0.3 sec.
Using the control
This control was designed and tested for IE6 and above, and for Firefox 2.0. The control’s custom realization finds the counties also by its code (this is a number). You can turn this feature on/off by uncommenting or commenting lines from the global
county.GetCounties(textctrl.value, count, name_services, m_select1, m_div1);
cfipses, ips_services,m_select1, m_div1);
To set control at a higher layer of the page, set the appropriate z-index in the dragable object style.
All counties are linked to the CodeProject home page in the sample.