ivkremer / jquery-simple-combobox Goto Github PK

In the http://jsfiddle.net/ivkremer/N2scs/ fiddle, modify the set of options for the first and second comboboxes so the text of the items are:

a*
b*
c*
d*
e*

Run the fiddle.

Select the a* text in the first combo field. Delete it. Type b* and observe the weird entry as the control tries to highlight.

Repeat on the second control. Since it is not highlighting matches the problem doesn't occur.

I think some regex escaping is needed.

Hi,
In first place thanks for the great work on this combobox.

While working in a project I realised that in some cases there may be the need of ignoring the accents when filtering the options for example,
I type Cajica but the Cajicá option is not showed.

Can someone guide me in the right direction for doing this.

An option like ignoreAccent may be a good add.

I will submit a fix shortly.

See http://jsfiddle.net/gjsjohnmurray/fLmx831m/

I shall submit a pull request shortly with a fix.

Can you add delay in milliseconds between when a keystroke occurs and when a search is performed. For example when you have list of 1000 elements, now search is start after every letter write (keyup) and performance is very poor (fullMatch).
I would like to start search immediately after stop writing the word (maybe delay 250ms).

Second petition, do you considered to use html placehodler when options empty is set to true. Of course text of placeholder shoudl by configurable.

For both things I modified your plugin for my needs, but code is ugly, anyway if you want to check changes, source are here https://drive.google.com/file/d/0B2naqgtblYdnbmtsQVZMQVRZYkE/view?usp=sharing.

Part of the #39 merge has resulted in the list not resetting to display all items when user deletes the only remaining character from the filter field.

A correction will follow shortly.

If an entered item matches an underlying option, then keyboard Tab key doesn't work.
You can repro it from its jsfiddle #113 (currently the most recent version)
http://jsfiddle.net/user/ivkremer/fiddles/

You'll use the composer?

Hi,

I am using single and multiple choice <select>'s in table-cells (as it's table values) and have no place for labels, as <select> imitates like it will be look finally (centered, size etc.). So I would supply user placeholder.

http://jsfiddle.net/g9tpzp7t/

With plain <select> it could be done (not perfectly, but even good), but for simple-combobox doesn't work placeholder for input (single choice) either "coping" attributes.

For single choice nice way would be join header with default text in input, which will disapper when user activate input (so like first plain <select>).
For multiple choice there should be text like choice block, but without styling and hiding when any value was selected.

Output should allow to give placeholders also for plain <select>, so both users - JS and non-JS will have placeholder.

Of course init attribute should looks simple just like

$('.combobox').scombobox({
   placeholder: 'Text'
});

I am not good enought in JavaScript to try do it by editing script, so that's why I am asking for this.

Greetings

Hi,

Why I am sure that is checkbox mode? I tried with

I am using:

var createcombos = function() {
   $( "select" ).each( function() {
      if ( ! $( this ).parents( '.scombobox' ).length > 0 ) {
         $( this ).scombobox();
      }
   });
}

(BTW maybe is there any better way to don't duplicate select's that already scomboboxed?)
as I call it on init and every time I add new row or table with combobox.

For realize how it's looks in front-end:

However I observed that it's broken on init with many instances of checkbox mode's comboboxes:

I am not good in JS, but as I understand you follow state of combobox and as I use it on select that every start almost the same (no class or similar): <select class="combobox" multiple="multiple" name="teachers[1][3][class][]"> (only name is different).

JSFiddle with many instances of select: http://jsfiddle.net/YgeFM/47/
JSFiddle that broken even on only twice instances of multiple select called by tag name with name attribute: http://jsfiddle.net/YgeFM/48/

I am using JQuery 1.11.3 (full), JQuery migrate 1.2.1 (minified), scombobox 1.1.21 (oh, I am outdated)
However you could see that it is broken even with resources used in your fiddles.

How can I fast fix it for my own? If I don't fix it in 3 days, I will have to disable plugin until I will find solution.

Thanks in advance,
Greetings

uppercase letters in search text or in results will disable highlighting

search: asdf
oifgildgfioer
[asdf]dsfds
Asdfdsfs <- does not highlight

search: aSdf
oifgildgfioer
asdfdsfds <- does not highlight
Asdfdsfs <- does not highlight

See http://jsfiddle.net/gjsjohnmurray/qd732sn9/ for demonstration.

I will try and fix this.

there's a typo in the doc, expecting listener, but it has: lisneter

Here are methods which help with working with listeners. To add a listener, use $(combobox).scombobox('lisneter', function(){}) syntax. this will refer to different elements depending on event type. To trigger an event use $(combobox).scombobox('lisneter') syntax; to trigger event with a certain namespace, use $(combobox).scombobox('lisneter', 'namespace') syntax.

Не получается передать пустое значение - всегда подставляется первое из списка.

Whether you attempt to get the value via this, event, or .('val'), any attempt to get the value of the combobox using the 'change' listener will invariably return the value that the combobox had -before- changing, which makes the data returned not useful in many applications.

down correctly highlights the next option, but up will always select the first or last option

Using your fiddle http://jsfiddle.net/ivkremer/YgeFM/ type an UPPERCASE value (e.g. "HELLO") and click the button. The value returned is the lowercase version of what you typed (e.g. "hello")

The filterIgnoreCase feature you recently added to the code has not been added to the documentation.

When the dropdown list is not showing, and focus is in the filter input field, pressing cursor-left reveals the list. In my opinion this is incorrect. Of keystrokes that do not alter the filter value, only the cursor-down key should reveal the list.

I will submit a fix soon.

I'd like to use the combo box in a manner where keying in a new value not on the list is not considered an error condition. The "invalidAsValue" option is useful, but the value is still highlighted, indicating an error. It would be ideal to have an option to supplement "invalidAsValue" which would suppress the "invalid" highlighting.

This bug can be seen on the demo file itself.

To reproduce, click in the second combo box. The options drop down appears, with two items in it. Now click in the first combo box. That combo box's drop down appears, but the other drop down does not disappear.

Other blurs seem to work correctly. If you focus into a text field, say, on the same page, the combo box blurs correctly. The problem seems to come up only when blurring from one combo box and focusing into another.

1. When fillOnBlur is false, matching that occurs when Enter is pressed ignores case.
2. Invalid value checks ignore case.

See http://jsfiddle.net/gjsjohnmurray/ntge0beb/

I plan to submit a pull request shortly.

The combobox defaults to the first item in the list. Is it possible to make it default to a blank value instead?

1. Setting a value programmatically raises a change event. This is unexpected, since it is not how a regular SELECT control behaves.
2. Whenever the change event occurs (e.g. user picks a new value) any code attached to the event retrieves the before-change value rather than the after-change one.
3. In some circumstances a single user action produces two change events.

See http://jsfiddle.net/gjsjohnmurray/pw3pL6gc/ for a demonstration of 1 and 2.

I will submit a pull request shortly to fix all three of these faults.

Pre-selected option results in a empty scombobox.

Hi,
I don't really understand the need of the timer of 200ms in the blur event.
It's annoying, cause if I change select' value and then immediatly click on the submit button, the new value won't send (Cause the click event will trigger before the blur timeout end).

Any advice ?
Thanks for your work.

Hi,

I am using both multiple and single choice <select>'s and noticed that opening multiple (checkboxs) list by arrow doesn't work. Works only hiding by arrow when list is opened.

JSFiddle: http://jsfiddle.net/kyb4ooxs/

My browser is Opera developer 32.0, Windows.

BTW multiple select should have white background by default.

Greetings

Demonstrated at jsfiddle.net/qjrpykfq/2/

I plan to implement a fix and send a pull request.

I would prefer my combo not to expand as soon as the user clicks into the field. I tried setting expandOnFocus to false, but this is only effective if the field is empty. If it already contains a value the list drops down as soon as I click into the field.

The full message is:
TypeError: this.parent(...).data(...) is undefined jquery.scombobox.js:890
App loads chunks of html and binds scomboboxes to the particular divs as:
$('#mydiv', '#parent-div').scombobox({
'full-match': true,
wrap: false,
highlight: true
});

Then everythings is working fine. During App shutdown $('#parent-div').empty() is invoking to clean all loaded chunks. After that the mentioned message appears every time when I click on the page.

Call $('#mydiv', '#parent-div').scombobox('close') before cleaning html chunk does not help. At the same time debugging JS code shows that 'this' points to nothing in function slide(...).
So the simpliest workaround I've found is to add:
if (this.length == 0)
return;
in the beginning of slide(...) function.

Can you suggest the right way how to deal with such problem?
Anyway - thank you for your work.

Hi,

I want my users to be able to select a value from the list, but also enter a new one. Currently, when calling .('val') with an "invalid" input value, the function returns nothing.

How could I implement such an option? I went through the val function:

        /**
         * Combobox value setter and getter.
         * @param {String|Array} v value
         * @returns {Object|String|Array} jQuery object or string/array combobox current value.
         * Value returns as string in the default mode and as an array of values where items were
         * checked in checkboxes mode.
         * If combobox is disabled then empty string is returned.
         */ // TODO add the second parameter: flag if trigger changing the value (now it is triggering by default)
        val: function(v) {
            var mode = this.data(pname).mode;
            if (arguments.length == 0) { // get the value
                return mode == 'default' ?
                    (this.find(cp + cdisplay).is(':disabled') ? '' : this.find(cp + cvalue).val()) :
                    (mode == 'checkboxes' ? getValues.call(this) : null);
            } else { // set the value
                if (mode == 'default') {
                    setValue.call(this, v);
                } else if (mode == 'checkboxes') {
                    setValues.call(this, v);
                }
            }
            return this;
        },

but could not find where the input is emptied. Also the different listeners remain a mistery to me. I would like to allow an option e.g. "allowNew" which returns the actual input value even if it is not in the select list.

Thanks

With fillOnBlur false, when what I type prefix-matches more than one entry and matches one of them exactly, the exact match is not highlighted until I close the list and reopen it.

The fiddle at http://jsfiddle.net/gjsjohnmurray/gp3gf2xm/ demonstrates this.

Run the fiddle. Go to the field and type AB. The list shows ABC and AB but AB is not highlighted. Press Enter to confirm the AB choice. Then press cursor-down to show the list. This time when ABC and AB are listed the AB entry is highlighted. Reload the page and repeat the test but this time close the list by pressing Escape. When you show the list again (e.g. cursor-down) the matching entry is not highlighted.

I will push a fix shortly.

When parent element does not provide enough height, the dropdown box gets hidden. In the screenshot, all combo boxes are inside a div element which has fixed height.

Better visual if the dropdown list is atop everything else so it is not constrained by parent element height. The expected should be:

Click into any of the combos in the fiddle at http://jsfiddle.net/ivkremer/N2scs/

The list drops down.

Press Escape. The list closes as expected, but focus is not on the input field so I can't select/enter a new value by typing until I have clicked into the input field.

Last commit date on minified file is 2 months ago. For the non-minified one it is 21 days ago.

Hi

I think the search condistions is not good enough. I hope following condition could work.

Dropdown list
val 01
val 02
val 03

If I type 03, val 03 should showing in dropdown list, currently there is no items inside

The index.html documentation lists beforeOpen, beforeClose, afterOpen and afterClose as events, to which listeners can be attached in the same way as to change, focus etc, i.e.

$(#id).scombobox('afterClose', function(){})

In fact this give a "No such method" error. Here's an example of how to attach a function to one of these four events:

$(#id).scombobox({afterClose: function(){console.log('afterClose');}});

Fix will be submitted shortly

I suggest combobox change selected vaule's color, after setting value.
I try to modify the code and it's ok, the code is below :
function setValue(value) { // for default mode
...
+ $t.find(cp + clist + ' p').eq($selected[0].index).addClass(pname + chovered).siblings().removeClass(pname + chovered);
}

In my app a window acts like a dialog, with OK and Cancel buttons. Escape key is treated as a shortcut for Cancel. When focused on a dropped-down scombobox the Escape key slides the list up as designed, but then propagates and causes my window to close.

I want to stop propagation of Escape when it has just caused the list to slide up, but not when the list was already closed.

I will propose a code change to achieve this. If you don't want to merge it perhaps you can suggest another way to get the result I want. I wondered about using the afterClose callback but (a) I wasn't able to a listener to that, and (b) I don't think the listener will have access to the current event to be able to call its stopPropagation() method.

How can i destroy or reset the plugin?

Steps to see this:

1. Run the fiddle at http://jsfiddle.net/ivkremer/YgeFM/ which sets invalidAsValue true but leaves fillOnBlur defaulted (false).
2. Click into the combobox.
3. Delete the "item 1" text and type an invalid value, e.g. "hello"
4. Click the button below the field to discover the value. It reports "hello" which is correct.
5. Amend the fiddle to set fillOnBlur true, then run it.
6. Repeat from step 2 above. Notice that the first click of the button reports value "1". You must click it a second time to report the value you entered, "hello".

'blur' handler code change that I described at the top of my 15 Dec 2014 on issue #25 was part of the #35 merge that fixed #32. I'm pretty sure it was working correctly for me in Chrome at that time, but today with Chrome 40 I still have the problem. the relatedElement property of the event is frequently null, even when the new focus element is an item on the list.

I have devised an alternative solution and will submit it for merge soon. Shall wait a while first to see if you merge my previous pull request, #46.

If you type enough text to reach the right-hand limit of the input field you end up typing characters under the dropdown button image.

I will submit a simple fix shortly.

When fillOnBlur is true, if what I type matches more than one entry but matches one of them exactly, when I press Enter you select the first match rather than the exact match.

To see this, run the fiddle at http://jsfiddle.net/3gpfkgsr/1/

Delete the initial value, type AB, then press Enter. The value filled is ABC rather than AB. This is unexpected.

I will submit a fix shortly.

http://jsfiddle.net/98ab8/56/

$('#combo-028').scombobox({'animation': {duration: 0}});

Clicking on the second input opens panel on mousedown and closes it on mouse up.

Need to reinstate the previous relatedTarget technique in addition to the setTimer one, else when user clicks on dropped list's scroller in IE the list closes.

I will submit the fix shortly.

I was a little confused and didn't look too closely but it nagged me having spent 10min looking for this typo on my part ;)
Just a suggestion: maybe rename "jquery.scombobox-min.js" to "jquery.scombobox.min.js" - I substituted the dash with a period.
Two reasons: a) every other file in this package follows this convention and b) most other JS/CSS plugin/package/.. files follow this convention as well.

Thanks for your great work!