combobox.rb

#	This is yet another attempt at doing the elusive combo box.
#	Since I moved to jquery,I wanted to see if there was something out there
#	that was better then what I found a few years ago. There was
#	a jquery plugin, but I am not sure how it worked - didn't see where you could enter text!
#	You should be able to either select from a pulldown list, or add an item that is not in the list. 

# 	This in a nutshell overlays a 13em input text field over a 15em select tag. (css)
#	There is a helper method build_combo_box where you send the form_builder object, the method,
#	the choices and the current value. It builds the combo box.

#	The javescript then adds to the select list if text is entered, or changes the text field if the pulldown is used.
#	The select field does not have a name so only the text field is submitted.



# two methods in application helper or some other helper

module ApplicationHelper

  def combo_options(options,value)
    if not(options.include?(value))
      options << value
    end
    options_for_select(options,value)
  end
  
  def make_combo_box(form,method,options,value)
    text_id = (form.object_name + method.to_s).gsub(/[\[\]]/,"_").gsub("__","_")
    html = %Q(
     <div class="combo-box">
       <select data-behavior="comboBoxText" id="#{text_id}_select" >
        #{combo_options(options,value)}
       </select>
       #{form.text_field(method,"data-behavior" => "comboBoxSelect", :value => value)}
      </div>
    )
    return html.html_safe
  end
end

# a little css

div.combo-box{
	position:relative
	;height:1.5em
}

div.combo-box input{
	width:13em;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0	
}
div.combo-box select{
	width:15em;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0	
}

# a little javascript (jquery used a little)

$(document).ready(function() {
	$('[data-behavior="comboBoxSelect"]').bind('blur', function() {
		setComboBox(this)
	});
	$('[data-behavior="comboBoxText"]').bind('change', function() {
		setComboBoxText(this)
	});
});
# the behavior calls

function AddSelectOption(selectObj, text, value, isSelected) {
    if (selectObj != null && selectObj.options != null){
			selector = "#" + selectObj.id + " option[value=" + value+']'
			if ( $(selector).length == 0 ){
        selectObj.options[selectObj.options.length] = new Option(text, value, false, isSelected);
			}else{
				$(selector).val( value ).attr('selected',true);
			}
    }
}

function setComboBox(elem){
	var theSelectList = document.getElementById(elem.id + "_select");
	AddSelectOption(theSelectList, elem.value, elem.value, true);
}

function setComboBoxText(elem){
	var text_id = elem.id.replace("_select","")
	var theSelectText = document.getElementById(text_id);
	theSelectText.value = elem.value
}


#and an example view call using UJS f is the main form object, m is a field for object

<tr class="field">
  <th><%= m.label :combo %></th>
  <td><%= make_combo_box(m,:combo,%w{ one two three  big_Ben_Roethlisberger_big_name},f.object.metadata["combo"]) %></td>
</tr>