The Coffeescripter

Just another developer blog

1. Rafal 2009.07.16 at 10.10

   Please close the list after pressing Esc. What about VERY long list? Ajax list? Looks very nice BTW! Pressing arrow down should open the list. Pressing arrows left, right moves cursor in the edit area and in moves the cursor in the list, which is confusing. Did I said it looks very nice? ;-)
2. Andy 2009.07.16 at 15.41

   Hi Rafal!
   Thanks for the feedback, I’ve added the stuff you wrote about, and even some other stuff that should have been there. I’m going to test it some more, and then make a new release.
3. vit 2009.07.17 at 15.54

   not work with Opera
4. Andy 2009.07.17 at 16.13

   Hi!
   Thanks for the heads up. It’s fixed now, and the problem was that Opera and Firefox 3.5 doesn’t like the iframe in the background. So an iframe in the background is only displayed now for the browsers that need it.
5. Aaron 2009.07.27 at 18.40

   It’s great,thanks.I like it so much. It looks cool and useful.
6. Andy 2009.07.28 at 10.46

   Thanks for those kind words!
7. scott moerike 2009.08.10 at 07.50

   From the example above I don’t get how to add a new item to the select list??
8. daniel 2009.09.12 at 11.38

   I do not think it works using the keyboard. Using tab shift+tab to navigate, the typed text (e.g. qwerty) is changed to the first element in the list. Using mouse, the text (e.g. qwerty) is still there. Tested on FF 3.5.2 Chrome 2.0.172.43
9. francis 2009.09.25 at 10.14

   Hi!
   I would like to congratulate you, but i don’t understand where we put the photos to play in the gallery.
   Thank you to answear me if you have the time.
10. Bryn Jones 2009.10.05 at 13.00

    Hi there. Congratulations on a very nice plugin.

    I have a couple of feature suggestions that I think would be really useful. The first is for the text to be highlighted when you click the control – that way, if you want to change the value, you begin typing immediately, rather than having to remove the text or highlight it manually.

    The other suggestion is more of a bug fix – if you type something that doesn’t appear in the list, if you defocus the control by clicking elsewhere on the page, the text typed remains in the control, even though it isn’t the selected value and doesn’t get submitted with the form.

    Hope the above is useful – and thanks again for the plugin.

    Best Regards,

    Bryn.
11. rtconner 2009.10.23 at 12.49

    any way you could make an option to remove one or many options? well thanks either way this was a useful class.
12. Shaci 2009.11.03 at 21.06

    Thanks!!!!
    But..What about VERY long list?
13. Lukas 2009.11.16 at 15.04

    how about optgroup?
14. zak 2009.11.18 at 18.43

    Hi, nice work
    i added this simple method:

    delOption: function(index) {
    if(index){
    this.select.find(‘option:eq(‘+index+’)').remove();
    this.wrapper.find(‘ul li:eq(‘+index+’)').remove();
    }
    else{
    this.select.html(”)
    this.wrapper.find(‘ul li’).each(function(){$(this).remove()});
    }
    },

    hope this helps :)
    bye, zak
15. Cody 2009.12.07 at 04.50

    I just found a rather obscure bug, or at least odd behavior. Firefox running on the Mac seems to be the only browser experiencing this (I’ve tried IE8, Safari, and Firefox on windows).

    When I select and item from the list box, it puts the window/cursor into text-select mode (as though you did a click-and-drag over some text) even though the mouse cursor is up. The issue goes away by clicking anywhere else in the window to clear the selection. I suspect this is a Firefox bug rather than a bug in your script, but I figured it’s worth mentioning for documentation purposes (it could be important to somebody)

    Brilliant work btw!
16. aaaa 2009.12.21 at 18.33

    aaa
17. pengpeng 2009.12.29 at 04.51

    Thanks for your work.
    I just fount that the plugin does not work properly with the jqueryUI plugin,since the dropdownlist displays under the dialog box. also,the items could not be selected.
    It’s a css problem ,maybe. I ‘ll leave msg here if i got any progress.

    Best Regards,

    pp
18. Stephen Howard 2010.01.12 at 19.53

    Please contact me regarding a small contract to make changes to your editable-select plugin.

    Regards,
    Stephen
19. GDur 2010.02.11 at 16.10

    perfect..this is what i need, becouse with this i can make a suggestionlist wich works on mobilephones as well.

    really good job
20. Atashbahar 2010.03.02 at 21.16

    Not working with jQuery 1.4.2 for some reason!
21. Johann Blake 2010.03.05 at 19.48

    If you place your dropdown inside a table cell and expand the dropdown, the list appears in the upper left corner of the browser’s client area.
22. Vlad 2010.03.19 at 22.20

    Doesn’t work with jquery-1.4.2
23. Raphaël Lemaire 2010.05.04 at 17.44

    Hi,

    Your plugin works great and helped me a lot. Thanks !

    I’ve added a few things, if you are interested :

    You cannot add attributes to the generated input such as maxlength or onClick and so on. So I added a new map in the settings :

    var defaults = { bg_iframe: false, onSelect: false, items_then_scroll: 10, case_sensitive: false, attributes : {} };

    Wich is used later in the script :

    this.text.addClass(‘editable-select’);

    // copying the given attributes
    for (attributeKey in settings.attributes) {
    this.text.attr(attributeKey, settings.attributes[attributeKey]);
    }

    this.select.attr(‘id’, id +’_hidden_select’);

    The settings can then be customized this way :

    bg_iframe: true, // corrects an ie bug, according to the site
    onSelect: function(list_item) {
    $(‘#results’).html(‘List item text: ‘+ list_item.text() +’ \
    Input value: ‘+ this.text.val());
    },
    attributes : { ‘onPaste’ : ‘return false’, ‘autocomplete’ : ‘off’, ‘size’ : ’30′, ‘maxlength’ : ’70′ }

    I also changed the min height property of “.editable-select-options li” to make empty options visible :

    .editable-select-options li {
    cursor: default;
    padding: 2px;
    min-height: 1em;
    }

    Regards,
    Raphaël Lemaire
24. Alex Babkov 2010.05.12 at 11.42

    Plugin won’t work with jQuery 1.4.2 due to a change in the data method. Calling data on an undefined index will now return a typeof of object not undefined. Change the relevant lines to check for null reference instead:
    e.g. instead of using this to check if it hasn’t been set: typeof $(this).data(‘editable-select’) == ‘undefined’
    use this instead: $(this).data(‘editable-select’) == null

    Great plugin by the way!!
25. Gray 2010.05.14 at 15.51

    Very cool plugin!
    I have one feature request: is it possible to add a handler when a user type a value that does not exist on the list? For example, add the new value as an option, and optionally send it via Ajax (so one could add it in a database for the next access)
26. Johannes 2010.05.16 at 12.56

    Hello

    First of all…thank you for this nice plugin. It will probably help me but it is not working with the latest jquery 1.4.2
    the function select.editableSelectInstances(); only gets the result [undefined].
    If you don’t have time to do it please give me at least a hint what the problem is so maybe I could do it. But at the moment I just have no clue. For example I just don’t know where the “editable-selecter” at $(this).data(‘editable-selecter’) comes from.
    greetings

    Johannes
27. Kaore 2010.06.26 at 10.12

    Hi Andy, I want to use this script for my site, but I need a way to update the content of the list once it has been initialized. What is the best way to do that?
28. gdever 2010.07.16 at 03.02

    Good plugin just what i need!
29. enjoy 2010.08.06 at 17.45

    Good plugin just what i need!
30. Praveen Andy 2010.10.06 at 19.03

    Can anybody can tell if it works with 1.4.2 or not.
    I am facing problem with it
31. seokot 2010.10.14 at 10.13

    An editable select list plugin? Mmm something new I never heard of. I guess I will try that out before saying any further. Thank you for the news.
32. qwe 2010.10.28 at 19.16

    Why the fuck you can’t give normal tutorial for addOption? this script i useless if there is no normal example
33. joe 2010.11.01 at 15.42

    if you post something, the least you can do is to answer people that have questions otherwise this wastes more time than help !
34. Alan Kesselmann 2010.11.23 at 17.22

    Hi!

    This is great widget, but i have a problem with it. Namely – it takes values from select options and propagates lis’s with those values. But in case of selects, values usually hold information that makes no sense to UI user, while the labels or innerhtml of option itself makes sense to user.

    Now i would modify the script, in a way, which assigns ids to list elements which will contain the values of original options and the text of li’s would hold the innerhtml or labels of the original options. It probably would make sense to turn this into an aditional option. What do you think?

    Are you interested in doing this kind of modifications yourself or can i do it? I intend to use it in project which will earn someone (my boss lol) quite a big buck- without looking at what gpl licence allows im asking, if i can do it anyway.

    Best regards,
    Alan Kesselmann
35. Madhuri 2010.12.18 at 13.21

    Nice one
36. Aleksandr 2010.12.29 at 10.54

    Please write example of this page
37. Edwin 2011.01.09 at 11.43

    In IE6 , this plugin can cause the whole page too slow………
    And in IE6, a bug: HTML’s select tag can display above the EditableSelect options,in other words,your EditableSelect is not always on the top…
38. Sadheesh 2011.01.20 at 17.41

    We had some porblem in sample. This sample is working very good based on the class name. But we cannot handle this code many select drop down with different control id and same class name.
    Can you do favour to change the code based on control id’s instead of class name?

    $(function () {
    $(‘.editable-select’).editableSelect(
    {
    onSelect: function (list_item) {
    $(‘#results’).html(‘List item text: ‘ + list_item.text() + ‘ \
    Input value: ‘ + this.text.val());
    }
    }
    );

    var select = $(‘.editable-select:first’);
    var instances = select.editableSelectInstances();
    instances[0].addOption(‘Germany, value added programmatically’);
    instances[0].addOption(‘Denmark, value added programmatically’);
    instances[0].addOption(‘Norway, value added programmatically’);

    var select1 = $(‘.editable-select:second’);
    var instances1 = select1.editableSelectInstances();
    instances1[0].addOption(‘Al, value added programmatically’);
    instances1[0].addOption(‘Brad, value added programmatically’);
    instances1[0].addOption(‘Fred, value added programmatically’);

    });
39. Andres Yajamin 2011.02.04 at 01.17

    Great library, thanks,
    but I was trying to regenerate the library using ajax, and I haven’t found a good method to clean the list,
    if a reinstance the library to the an element it seems to created varios
    selected-options containers
    it works for FF, but not for IE7,

    it will be great a method to remove and clean elements

    Thanks
40. Dalvir Singh 2011.02.09 at 12.16

    when new option added using edit field
    if we use tab for move to next field value of editable field lost
    otherwise works well when click on next field using mouse

    Thanx
41. Andy Feliciotti 2011.03.04 at 18.29

    Nice script, thanks!
42. Sefa GÜNGÖR 2011.03.06 at 13.06

    really good job

    Thanks
43. Tyler Sommer 2011.03.23 at 19.58

    Hey there, great plugin. It’s been a few months since you last updated, but I wanted to comment on something that may be useful.

    I wanted to allow users to type *new* values. This works fine, except tabbing out or hitting enter would select the first value, or whatever value was highlighted. This proved problematic.

    My fix entailed a very simple change:
    line 351, part of highlightSelected, if there is no current_value or best_candidate, I simple changed it from:
    this.selectFirstListItem();
    to:
    context.clearSelectedListItem();

    With a bit of testing, this appears to have solved any problems with wanting a new value. Perhaps making this an option would be useful to others.

    Thanks for the great plugin!
44. Himel Khan 2011.04.24 at 10.47

    Great scripts i’ve ever seen… It’s really a turning point as well as useful for my project. Heads of to you.. Keep it up.
45. Luciuz 2011.04.29 at 13.42

    Hi
    this is awesome jq-plugin, but How make select open its list, when only arow is clicked. Thank you
46. Alan Kesselmann 2011.05.11 at 14.34

    At the time when i needed this script, it did not work as i wanted… when it became issue again (much later) i found that jquery had created their own plugin for this, which works like a dream:
    http://jqueryui.com/demos/autocomplete/#combobox
47. Yuri Persion 2011.05.11 at 23.43

    Hi,

    I am trying to create editable select dynamically. Is there any way to instantiate EditableSelect? Any other way of achieving this?
    I am trying on button click to insert a row in the table and to place an editable select into it – no success so far.

    Thank you,

    Yuri.
48. Andrew 2011.05.20 at 08.01

    Can not make editable select list work on the form open under thickbox. I tried various options however the list is hide under thickbox. any suggestion
49. Gil 2011.05.27 at 15.42

    Hi,

    Great puglin, only did a minor coding. When the input text isn’t in the list, remove the selected class from the list items. Your code select always select the first list item in this given case.

    if(best_candiate && !value_found) {
    context.clearSelectedListItem();
    context.selectListItem(best_candiate);
    context.scrollToListItem(best_candiate);
    } else if(!best_candiate && !value_found) {
    //this.selectFirstListItem();
    this.clearSelectedListItem();
    };

    Thanks,
    Gil
50. Ely 2011.05.31 at 11.36

    Hi
    I am not sure, but may be this condition is wrong?
    if($(this).data(‘editable-selecter’) !== null) {
    instances[i] = new EditableSelect(this, settings);
    $(this).data(‘editable-selecter’, i);
    };

    I try run this script with ie8 and it did not work while i change condition to $(this).data(‘editable-selecter’) === null
51. Ely 2011.05.31 at 11.37

    forgot version
    Version: 1.3.2
52. Ely 2011.05.31 at 11.39

    and function :)
    $.fn.editableSelect
53. Ely 2011.05.31 at 12.04

    And how about some placeholder or unselectable default option?
54. Favio 2011.06.15 at 23.14

    it doesn’t work =( what am i doing wrong??
    $(‘.editable-select’).editableSelect({
    bg_iframe: true,
    onSelect: function(list_item) {
    /*$(‘#results’).html(‘List item text: ‘+ list_item.text() +’ \
    Input value: ‘+ this.text.val());*/
    }
    });
55. alberto 2011.07.07 at 03.44

    muy buen tutorial gracias por tu aportte a nosotros.
56. alberto 2011.07.07 at 03.46

    gracias por su apor a esta informacion se le agradece a uste y su acompañante este es un buen documento para trabajar ya que funciona muy bien es todo
57. Eric Atkin 2011.07.11 at 23.45

    Doesn’t work with jquery 1.6.2 which is the latest as of today.
    I don’t have time to troubleshoot today, but I thought I’d report it.
58. Eric Atkin 2011.07.12 at 01.13

    The issue with jquery 1.6.2 seems to be with the $().data() function. It stores undefined instead of 0 when 0 is passed.
59. david 2011.07.13 at 02.16

    The plugin is working but when I type in a value that is not in the list and tab out of the field my data is lost. I don’t even have the option of adding it to the list. Any help would be great.
60. Denis 2011.08.09 at 15.24

    In file jquery.editable-select.js row 303, 304

    code:

    this.wrapper.show();
    this.hideOtherLists();

    fix:
    this.hideOtherLists();
    this.wrapper.show();

    Need hide other elements, before show current.
61. Denis 2011.08.09 at 15.26

    And GitHub is beautiful, please use github with bugtracker.

    Thanks You for great plugin !
62. Dinh Nguyen 2011.08.11 at 13.31

    What should I do if I want to set the default text value is not appeared in the option list?
63. Graham 2011.08.15 at 01.18

    Hiya,
    really like this select box. Excellent functionality!
    Couple of things though.
    It’s not immediately clear in your demo that it picks up on items typed into it. Try adding a new select option for $_get['select_box_name'] to show this.
    Secondly – when Tabbing off the field, any typed input seems to be lost and replaced with a selection from the list. The same occurs if you hit ‘Enter’ as one often does when submitting a form. I’m no expert on jscript so I expect it would take me days to work this out. Is this difficult to fix? At the very least, to be able to tab in, type input and tab out again would be essential (IMHO) as tabbing through forms is fairly normal.

    Again though, thanks for a really cool script.

    Graham.
64. info 2011.08.22 at 08.27

    i want lightbox effect when i was click on big image how can i do this pls help me
    thanks……………….
65. Tim Kiphuth 2011.08.26 at 00.55

    Your plugin does not work w/ jQuery v1.6.x versions.
66. Saad 2011.08.26 at 00.56

    Hello,

    I test your editable select. It’s very good.

    but it don’t function correctly with jQuery 1.6x

    thanks for your help
67. bercut497 2011.09.16 at 08.28

    hidden select go visible when i move it.
    check it on your demosite.
    http://coffeescripter.com/code/editable-select/
68. Clyde 2011.10.18 at 07.53

    Hi Andy,
    I’ve been using your plugin for a while, it works like a charm. But I meet a bug in IE6, it’s about the background-iframe shim.

    In the method: createBackgroundIframe:
    you use this.wrapper.css(‘top’) and this.wrapper.css(‘left’) to position the bg-iframe
    It doesn’t work. The values are just ‘auto’. I tried to use this.wrapper.offset(), it doesn’t work, too. ( it produces { top:-2px, left:-2px}, don’t know why.

    So, I checked out the method: positionElements to see how you position the options. Then I use this.text.offset(). Finally it works.

    Also, in createBackgroundIframe, I think we should first change iframe’s style, and then append it in . It saves some rendering time.

    Anyway, thanks for the great job you’ve done!
69. Marco 2011.10.18 at 14.19

    Is there anything in the works to add an option that’s typed in, but not originally found in the list?

    For example, in the Country list above, I’d like to type “test”, hit Enter or Tab, and have it added to the list.

    In the meantime, I’ll try to tap into a callback and use the addOption() method to accomplish this.
70. Jim 2011.10.19 at 21.51

    It doesn’t work in a dialog. The drop down list is hide behind a dialog once it is used in the dialog.
71. Xu Zhe 2011.10.21 at 04.26

    like this Sweden, selected
    How can I get the value ?
72. Gaurav 2011.11.09 at 10.50

    Thanks you so much for a great plug-in.
73. wang 2011.12.05 at 05.44

    it does’n support jquery-1.4.2.min.js ,can you sove it ,thank you
74. sivaraj 2011.12.08 at 15.16

    it is not working for dynamically added Select box. is it possible?
75. Valdir 2011.12.08 at 15.46

    Nice editable select list. They are almost perfect for lookups. It would be nice to have the same behaviour for alt+down, and opening the list on focus for all of them. I would like to disable the list on focus for all of them.
76. mohamed khalil 2012.01.23 at 16.23

    i need documentation for this control if it available
77. sandy 2012.01.25 at 11.29

    Nice plugin.. how to get the value in server side when using runat=”server” for select option
78. ramesh 2012.01.27 at 08.22

    hi,
    this is nice plugin. But i want to get text of the listitem instead of value. i have dropdown which dispalys countrylist. my code as follows

    Denmark
    Sweden
    Norway

    Finland
    Iceland

    In dropdown i am the value only. I want to show the country names in dropdown. please help me on this

    Thanks
    Ramesh
79. Letitia Lee 2012.01.30 at 08.29

    I am trying to use your code to allow user to select a size. I am trying to achieve an effect is that when the mouse enter “My Size Is …” box, it will allow user to change. So far things works fine, but when the mouse exit, I wish to hide the select. However, I couldn’t get the pull down to hide with the select, so it’s kind of awful that the select disappears, but the pull down list is around. Could you give me some idea how can I hide that list if the mouse has left the list? From your code, I think it will disappear if I click on the body, I wish the list to disappear if the mouse exit the list, THANKS VERY MUCH!!!
80. Andrey 2012.02.04 at 14.01

    Hello! Can you help me – how to do that plugin understand option value and option title? I want to have text value in input field and in the list, but after submit it must send option value (some ID or other numeric value that suggest to text value between and ) if it value exist (exist attribute value=”") and text value if not?
81. Tony 2012.02.17 at 20.14

    You know why in Firefox 10 if I set-up the with to 150px, and if I do the same with another component (a input text box or so) the combo doesn’t respect the with and is presented smaller???
    Thanks!
82. Tony 2012.02.23 at 18.00

    Thanks you so much for this great plug-in. Can we have a way to display html regular title tag?
    Thanks.
83. Peter Cardoso 2012.03.21 at 22.13

    Hi, its a great job, i jus guest if there is any licence or I can use free in any kind of projects, as personal or comercial projects… Congratulations for the plugin.
84. jhon doe 2012.03.22 at 19.15

    its a good work
85. Jesus Martinez 2012.03.26 at 22.46

    i have some problems, i try to use it but not work.im only have IE8.
    It works in this browser?
86. Dirk Sorensby 2012.04.12 at 00.55

    wasted much time trying to get this to work. Would not recognize “instances[0].addOpt
87. David 2012.04.18 at 16.26

    Hi, the editable select list is a great little plugin but…

    If you type a custom text value into the field and then tab out the value is lost. If you type a custom text value into the field and the click the mouse elsewhere then the value stays in the field.

    Is expected behaviour to loose the value after tabbing? It seems contradictory to the rest of the behaviour.

    Thanks anyway,

The Coffeescripter

Entries RSS Comments RSS