Start Projekte jQuery eComboBox

Paypal Donate

War ein Projekt hilfreich?


oder vielleicht ein Tutorial?
eComboBox
eComboBox - a jquery plugin to generate editable ComboBoxes:
simple usage:
  $("#cb").eComboBox();

<select id="cb">
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
<option>value 5</option>
</select>
 

Examples

arrow keys : navigate through combo box
enter key : confirm new or edited element and return to non-editing mode
delete key : remove selected element (except {NEW ELEMENT})

Example 1

Code:
	$("#editable").eComboBox();
			

Example 2

Options:

allowNewElements : false editableElements : true

Code:
	$("#editable2").eComboBox({
		'allowNewElements' : false,		// default : true
		'editableElements' : true		// default : true
	});
			

Example 3

Options:

allowNewElements : true editableElements : false

Code:
	$("#editable3").eComboBox({
		'allowNewElements' : true,		// default : true
		'editableElements' : false		// default : true
	});
			

Buttons to enable/disable options


 

Kommentare  

 
0 #15 tom 2012-05-06 01:35
Little bug stops it working in IE.
Zitieren
 
 
0 #14 handmade bracelets 2012-03-24 03:11
good.
Zitieren
 
 
0 #13 Krish 2012-01-31 19:54
Please ignore my previous email.
I included min.js earlier and cant find inputelement etc.. now i included jquery.eComboBox.js and its working fine in Chrome.

Thanks
Zitieren
 
 
0 #12 krish 2012-01-31 19:15
what is inputelement and selectelement here? i am getting editable combobox , but how to get the value entered by selecting {NEW ELEMENT}?

Regards,
Krish
Zitieren
 
 
+1 #11 test 2012-01-18 16:48
It doesn't seem to work in Google Chrome
Zitieren
 
 
+1 #10 rick 2011-10-23 16:30
The eComboBox does not work properly with IE 9.0.8112.16421

The 'change' event uses 'bind' to take all input changes; select-one, radio etc

But with eComboBox under IE9, the e.target.form is null when select-one is changed.

eComboBox event reporting is Ok with Firefox and chrome. Also, a standard select-one is Ok on IE9.
Zitieren
 
 
-1 #9 Wes 2011-10-20 16:30
Nice plugin. I prevented from submitting by commenting out the conditional of inputElement.keyup and changing to a blur event...
inputElement.blur(function(e ) {
//if(e.keyCode == 13){ //enter
if(selected=="{NEW ELEMENT}" ){
if ($(this).val() != ""){
selectElement.append(
''+$.trim($(this).val())+'');
selectElement.val($(this).val());
}
}else{
if( $(this).val() == "" ) {
selectElement.children( 'option:selected ').remove();
}else{
selectElement.children( 'option:selected ').text($(this).val());
}
}
$(this).hide();
selectElement.focus();
//}
resizeElements( );
});

There is no need to process every keystroke (keyup) since we only want to know when the input is complete (blur).
Zitieren
 
 
+1 #8 Doost 2011-10-19 10:44
I cannot get it to work inside a form since when the enter button is clicked to confirm the new entry in the combobox, the whole form gets submitted, instead of waiting until the submit button is clicked.
Help please! Thank you.
Zitieren
 
 
0 #7 rick 2011-09-24 18:23
Found the operator error.

This appears to be a solid & lightweight component.

Thank you for posting this!
Zitieren
 
 
0 #6 rick 2011-09-22 20:01
I have downloaded the eComboxBox but am new to JQ and cannot figure HOW to create the CB element. I have placed the js file into my html doc as: and I thought that $("#cb").eComboBox();
was the init so placed with the initial observers.
This is obviously wrong as I get just text 'Value 1..4' and no select box graphic is created for the combo box.
Also, looking at the Examples on the site, HOW can the entry be Edited? I have tried various key strokes but no edit; only DELete (assumes edit enabled)

I know that this works, but am stuck at the moment.
Sorry for the post in English, but cannot speak German.
Zitieren
 

Kommentar schreiben


Sicherheitscode
Aktualisieren