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 #17 Red Bottom Shoes 2013-06-10 07:14
thanks for discussing it.
Zitieren
 
 
0 #16 Tim 2012-12-24 15:07
Nice little control. simple and straight forward.

I've modified it slightly to allow users to enter {NEW ELEMENT} text as this is not resourced or very none technically orientated. I've also fiddled with the styles to it doesn't use absolute positioning etc so that it works cross browser.

i can e-mail you a copy if you like, just let me know.
Zitieren
 
 
+2 #15 tom 2012-05-06 01:35
Little bug stops it working in IE.
Zitieren
 
 
+1 #14 handmade bracelets 2012-03-24 03:11
good.
Zitieren
 
 
-1 #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
 
 
-1 #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
 

Kommentar schreiben


Sicherheitscode
Aktualisieren