eg: a b c

$('select').editableSelect();//here it finished render in html

then ,i want select the value with 'b' buy js code,how to do this?
$('select').val('b'); doesn't work well !

Chrome (and likely other browsers) want to help out by giving me autocomplete options on my editable select. But it obviously gets in the way with the editable select's features. Consider adding autocomplete='off' to the element when bound to it. I'm adding it manually now but I can't imagine a case where a user would want it in this case (because it messes with the dropdown).

press up key ,on the brower console show nextElement is not defined.

L156,157

When the Option list count is high (say ~200) , EditableSelectUtility.prototype.initialize function takes much time for the below loop. It really hangs if the editable select need to be repeated for each row in a table.

that.es.$select.find('option').each(function (i, option) {
var $option = $(option).remove();
that.es.add($option.text(), i, option.attributes, $option.data());
if ($option.attr('selected')) that.es.$input.val($option.text());
});

Hi there,

Is there a Bower package for jQuery Editable Select?

Regards

It works fine in chrome and firefox but when comes to IE it scroll not works. When we try to drag scroller by mouse it suddenly closes list but if we use mouse scroller to scroll list then only it stays at its position.

Hi,

in the Chrome browser (V52.0.2743.116, Windows 8) I cannot select the elements of the editable select via the mouse cursor.

Selection via the arrow keys works fine.
Also selection in Firefox, on Safari (iPhone 6s) and Chrome on android works fine.

Regards,
Markus

Thanks for the awesome plugin! Can you please add licensing information? Is the code available under the MIT license? This needs to be published so that your plugin can be used in other projects.

Hey,
Not an issue, more of a good news here.
I took the time to add typescript definitions for that package and the PR got accepted
DefinitelyTyped/DefinitelyTyped#18356
https://www.npmjs.com/package/@types/jquery-editable-select
Maybe the documentation could be updated to provide that information as well?

Please add support for grouped options.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Hi. My problem is that when I select an option, the built in events are called at least 2 times.

Example

This is a bug or I'm doing something wrong :)

@indrimuska

I recently used this plugin in an app to allow users to adjust font size. 1 thing I wanted was the ability for a user to enter a font size and have it insert into the dropdown in numeric order - so I wrote a relatively simple function to make it happen. It seems like this could be a useful addition to the add method - is this something you would consider including? If so, I'd be happy to take the first stab at adding it. I created a simple JS Bin showing how it works - let me know your thoughts.

JS Bin here

EditableSelect.prototype.select should also check a.is("li[disabled]") in order to prevent selection of disabled options.

If the value of option is different from the text, the value in request is the text, not the value
for example, the select is like this:

<select>
<option value="cat">lovely cat</option>
<option value="dog">lovely dog</option>
</select>

when use the editable select, if select the first option not enter text, the value in request is the "lovely cat" rather than "cat". Bug value in request should to be "cat"

How do I add a data atribute with this:

.editableSelect('add', text [, index [, attrs [, data ]]] );

I've tried many ways, but no way. Please, help me.

hi Indri Muska, great work if it included themes this plugin would be perfect.

Pressing Enter while selecting an option with the keyboard both selects and submits. This is not the ideal (nor advertized) behavior.

It seems that the up and down array keys don't work correctly under this situation

Hello,

First of all, this is really nice plugin.

The problem I've faced is that I'm using editable select in dialog, which is removed from dom after closing. But, because this plugin's making <ul> in body, it stays there.

It will be good, either if I'll be able to call something which will dispose specific 'editable select' or have reference on that <ul> tag.

Turn filtering off. Then type in a value which is not in the option list. It does not stick. It disappears as soon as you press enter.

I noticed that jquery-editable-select executes JS from select box option value even the data is HTML entity encoded. Am I doing something wrong here or is this an issue with jquery-editable-select?

I've uploaded one sample script here: https://wapsi.kapsi.fi/test.php

Example:

<select style="width:500px;" class="dropdownselectwithinput"> 
  <option selected value="Test XSS %B2 &#x3C;script&#x3E;alert(&#x27;BUSTED!&#x27;);&#x3C;/script&#x3E;">Test XSS %B2 &#x3C;script&#x3E;alert(&#x27;BUSTED!&#x27;);&#x3C;/script&#x3E;</option>
</select>
<script>$('.dropdownselectwithinput').editableSelect({ filter: false, duration: 100 });</script>

Safari version 11.0.3 when you click on the arrow the dropdown is displayed, when the number of items exceeds the space available A scroll bar is displayed but when You click on the scroll bar the dropdown disappears, the only way to access the items is by using the arrow keys.

how to get input field text value if a user not change any option in editable select

please help me

我该如何通过ngrepeat 来重新渲染dom

I having one selectbox in that on change value i have to set values of another select box for that i am using
$('select#chat_category').editableSelect('add', 'IIIII');
on ajax success event but the data is not set on ajax success event but when i manually add
$('select#chat_category').editableSelect('add', 'IIIII');
in outside ajax call its working !

Since this is implemented with a normal text input field, there's no reason not to support the placeholder attribute. We could set data-placeholder on the original select tag. This is needed for my use case. I'll see if I can work up a PR.

Hello,

When i try to get the value of my select via the GET method on php, i got the option name, not the real value.
I tried without initialise the select with editable-select and it works.

Example:

Before:

<select name="cars">
    <option value="1" >Alfa Romeo</option>
    <option value="2"  selected>Audi</option>
    <option value="3"  >BMW</option>
    <option value="4"  >Citroen</option>
</select>
[...]
echo $_GET['cars'] ; // shows"2"

After

<select name="cars"  id="editable-select">
    <option value="1" >Alfa Romeo</option>
    <option value="2"  selected>Audi</option>
    <option value="3"  >BMW</option>
    <option value="4"  >Citroen</option>
</select>
[...]
echo $_GET['cars'] ; // shows "Audi"

How can i get the value number "2" using editable-select please ?

Hi, Amazing code to work. Everything works fine, Except Selected "Value". Selected Test is been returning correctly, whereas Value is always "0".

Below my sample code :

ASPX

<select id="editable" runat="server" name="D1">    
</select>
<script type="text/javascript">
       
        $('#editable').editableSelect({
            // enable filter
            filter: true,
            // default, fade or slide
            effects: 'default',
            // fast, slow or [0-9]+
            duration: 'fast',
            // Where to append the dropdown list.
            appendTo: 'body',
            // "focus" or "manual"
            trigger: 'focus',
        })  
    .on('select.editable-select', function (e, li) {
        alert(
            li.text() + '. ' + li.val()
        );

    });

CS

       editable.DataTextField = "Name";
        editable.DataValueField = "Id";
        editable.DataSource = dtResults;
        editable.DataBind();

It is working with only "Numbers" and NOT Alphabets.

Can you help me with this issue ? Where Iam missing ?

Thanks in advance.

The demo is broken for me. All editable selects are not displayed in current Chrome and Firefox on Windows 10.

This is what the developer console tells me:

Mixed Content: The page at 'https://indrimuska.github.io/jquery-editable-select/' was loaded over HTTPS, but requested an insecure resource 'http://ghbtns.com/github-btn.html?user=indrimuska&repo=jquery-editable-select&type=fork&size=large'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://indrimuska.github.io/jquery-editable-select/' was loaded over HTTPS, but requested an insecure resource 'http://ghbtns.com/github-btn.html?user=indrimuska&repo=jquery-editable-select&type=watch&size=large'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://indrimuska.github.io/jquery-editable-select/' was loaded over HTTPS, but requested an insecure resource 'http://ghbtns.com/github-btn.html?user=indrimuska&repo=jquery-editable-select&type=follow&size=large'. This request has been blocked; the content must be served over HTTPS.
Uncaught SyntaxError: Unexpected string

Hello,
I wanted to report a problem.
If you use IE as a browser, the selection with a mouse does not work because after clicking on the options list, the drop-down closes.

Regards

test : http://codepen.io/anon/pen/OXEmdr

When applying this...
"Option" tag within a "value" attribute of the data is incorrectly copied.
This is a problem that only occurs in IE.

ex)
` select1 `

=> converted (Only IE)
`

• select1

If the number of options is greater than 400, then it will not work.

Hi ,
this plugin is really great, but looks like it doesn't work on bootstrap modal-dialog, when I use a selector in bootstrap modal-dialog, I verified it did not work on bootstrap modal-dialog, I am pretty new to jquery, could u please tell me how to fix this issue, thanks a lot!

paste the testing code:

    <div class="modal fade" id="triggerMdlEngineModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="triggerEngineModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row_fluid">
                        <form role="form" class="form-horizontal">
                          <div class="form-group" id="mdl-edit-div">
                                <label class="col-lg-2 control-label">ID</label>
                                <div class="col-lg-2">
                                    <input id="mdl-id-trigger" class="form-control" disabled></input>
                                </div>
                                <label class="col-lg-3 control-label">Name</label>
                                <div class="col-lg-5">
                                    <input id="mdl-name-trigger" class="form-control" disabled></input>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Source File Selection</label>
                                <div class="col-lg-9">
                                   <select id="mdl-sourcefile-selector" class="form-control">
                                   <option>/tep/modeleng/sourcefile/sourcefile1.data</option>
                                   <option>/tep/modeleng/sourcefile/sourcefile2.data</option>
                                   <option>/tep/modeleng/sourcefile/sourcefile3.data</option>
                                   <option>/tep/modeleng/sourcefile/sourcefile4.data</option>
                                   <option>/tep/modeleng/sourcefile/sourcefile5.data</option>
                                   <option>/tep/modeleng/sourcefile/sourcefile6.data</option>
                                   <option>/tep/modeleng/sourcefile/sourcefile7.data</option>
                                   </select>
                                </div>
                            </div>
                                    <div class="row-fluid">
                <div class="span4">Into this</div>
                <div class="span7">
                    <select id="basic">
                        <option>Alfa Romeo</option>
                        <option>Audi</option>
                        <option>BMW</option>
                        <option>Citroen</option>
                        <option>Fiat</option>
                        <option>Ford</option>
                        <option>Jaguar</option>
                        <option>Jeep</option>
                        <option>Lancia</option>
                        <option>Land Rover</option>
                        <option>Mercedes</option>
                        <option>Mini</option>
                        <option>Nissan</option>
                        <option>Opel</option>
                        <option>Peugeot</option>
                        <option>Porsche</option>
                        <option>Renault</option>
                        <option selected="selected">Smart</option>
                        <option>Volkswagen</option>
                        <option>Volvo</option>
                    </select>
                </div>
            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Landing Host</label>
                                <div class="col-lg-9">
                                <div id="mdl-landing-hose"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Landing Folder</label>
                                <div class="col-lg-9">
                                    <input id="mdl-land-folder" class="form-control"></input>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Execution Command</label>
                                <div class="col-lg-9">
                                    <input id="mdl-command-trigger" class="form-control" disabled></input>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Parameters</label>
                               <table id="paraTable1">
                                  <tr class="col-lg-12 control-label">
                                   <td><input maxlength="100" type="text" class="form-control" id="model-para-name1[]" value=""></td>
                                   <td><input maxlength="100" type="text" class="form-control" id="model-para-value1[]" value=""></td>
                                   <td><a href="javascript:void(0);" class="add">+</a></td>
                                 </tr>
                               </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            </div>
            </div>
            </div>
            </div>

<script>
        window.onload = function () {
            $('#basic1').editableSelect();
            $('#mdl-sourcefile-selector1').editableSelect();
    }
    function showup(){
    $('#basic').editableSelect();
    $('#mdl-sourcefile-selector').editableSelect();
    $('#triggerMdlEngineModal').modal({ 
    show: true
}); 
    }
    </script>

Hi all,

Sorry for the long interruption, I definitely have no time to maintain this project anymore.

Anyway as I see some of you still use this project and would like to keep it updated I am now looking for collaborators that will happily reviews PRs, issues and stuff like that.

Anyone interested?

Thank you all for investing your time in this.
Indri

When the list is open and the up/down arrow keys are being used to move through the list, those arrow keys should not be sent to the edit control (add e.preventDefault() in the handlers). This will prevent the i-beam in the edit control from jumping between the beginning and end of the text as up/down are pressed.

Hello,
I try with code :

<select id="my_select">
<option value="1">One</option>
<option value="2">Two</option>
</select>

On layout display then function work right but when submit form value get is one (not 1). this is not right when submit form.

Any idea to fix this ?
thank you

In your example onSelect with val() method you getting text of "option" tag,but it must be a value of tag.

when select "li" tag,sometimes the 'input' tag's 'blur' event will be fired before 'click' event , maybe better to use 'mousedown' event replace 'click' event and add e.preventDefault() in the 'mousedown' event handle function.

I have a case where the user may enter any value into an edit control, but I'd like for them to be able to choose from some common values (sometimes they will enter a custom value, but usually they will choose one of the common ones).

This control seemed like a good solution. When using this with filter: false, the user can see all of the items in the list (no matter what they may have already typed), and choose one from the list, or enter their own value into the edit control. So far, so good.

But I have few issues with the way the control works right now (for my use case). I'd like for the list not to show itself unless the user activates it explicitly, and I'd like the list to show itself whenever the user activates it, regardless of the value currently in the edit control and/or whether it was chosen from the list. And I'd like for the user to be able to collapse the list without selecting anything ("oh, none of these values are what I want, I'm going to type something").

Right now, when the focus goes to the control, the list is shown (regardless of the value in the edit control) - which I don't like for my use case. If the user chooses a value from the list, the list goes away, and then the list will not come back when you try to activate it again by clicking on the down-triangle indicator (you have to move the focus away from the control and back, then the list pops back down). And the only way to make the list go away is to select something from it.

So if there was a mode where the list always and only popped down when the user clicked the indicator, and if the list collapsed when the use clicked the indicator again (not requiring a selection to make the list go away), that would be my ideal functionality. I realize that means hit-testing on the down-triangle element instead of just activating/deactivating the list based on control focus, and maybe that's out of scope for what this control is intended to do.

If I choose some of the values in selectbox, this value doesnt change, when I want to get it from $_POST

Hi,
is it possible to dynamically add / remove to the Elements? If so, how can I do it? I tried to ad elements to the of the --> but afterwards selection for those elements doesn´t work anymore.
Thanks!

I have a use-case where I want to show options like this:

• 001 - User 1
• 002 - User 2
• 032 - User 3

But I only want to submit the 001 part of that. Is there a way to make the options in the dropdown differ from what is actually selected?

I'm running a Laravel 5.4 application and using jquery-editable-select to create a typeable pulldown. My code is set up like this:

<select id="country_code_dropdown" name="country_code">
    <option value="ZM" >Zambia</option>
    <option value="AL" >Albania</option>
    <option value="DZ" >Algeria</option>
    ...
</select>

Everything is going great, but when the POST request is sent I get the value Albania instead of AL. Is there any way to pass the value attribute?

I don't know if this fits as an issue, but I think it would be nice to have an option to only filter values when typing. This way, when a value is selected and the dropdown is spawned again, it shows all the values and not only the ones that matches the filter.

I suggest this because I believe users in general are prone to wrongly select an item from a list (exactly like I did while trying the plugin) and, when trying to select it again, they just find one option where there were others avaliable. This behaviour seems to be quite confusing from a user point of view.

To make things simpler (I presume), instead of a new option, you could change the filter from boolean to Enum with the options being "always", "never", "typing". It seems like a valid way for me.

Thanks for the plugin and I hope that I'm not asking you too much 😄

Is no support of value attribute of the option?

<select id="editable-select" name="…">
  <option value="1">Alfa Romeo</option>
  <option value="2">Audi</option>
  <option value="3">BMW</option>
  <option value="4">Citroen</option>
</select>

Could receive a value instead of option label.

$('#container').on('select.editable-select', '.editable-select', function (e, li) {
// occur twice
}

I upload into jsfiddle but not running
https://jsfiddle.net/marcioDraw/q3q3byac/9/

But is more easy to show you, all selects are "jquery-editable-select".
But second and the third only populated with load from external file and with id from previus select.

.load() running like a charm with normal select, but with your script dont because is not more a select.
SO, how I can load options to populated the "jquery-editable-select"?

All the best.

Thanks.

Any possibility of JQ3 support?