danielfarrell / bootstrap-combobox Goto Github PK

I cant use the combobox with inline form. the element is wrapped by a div which seem to always fall onto a new line

Original selectbox can have own styles class like "span12".

This script have to overwrite it and copy to the rendered one.

Hi,
From the past few days, the drop down icon was being duplicated so today I decided to look it up turns out the same problems was seen in your code at
http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html

This is the way it looks on my Mac - Chrome, Linux - Chrome: http://imgur.com/cmV5S

I'm not sure what's wrong though, if possible could you please look it up

Thanks

Like this:
http://i.imgur.com/4QfgB.jpg

with Bootstrap 2.1.0

I have been trying to use the bootstrap combobox with angular but the mere act of databinding the select seems to do "funny things" to the select.

The b-c renders and you get typeahead help but the dropdown doesn't show your list of available options.

Thanks for the great bootstrap addition. I was just wondering how do you clear and repopulate this combobox? I am using Jquery to clear the combobox and repopulate it, but the changes dont seem to be reflected in the typeahead section. Any pointers in clearing and repopulating with new options would be much appreciated.
Thanks,
richard

Hi Daniel,
Thanks for providing such a great looking plugin!

I am trying to modify the code to support items not in list. So if someone types something in and presses tab it acts like an input box. I am a bit confused as to where to change the code to get this behaviour.

I've looked at these lines:

    case 9: // tab
    case 13: // enter
      if (!this.shown) return
      this.select()
      break

Any chance you could give some hints as to how to do it?

Make, pls, version without close-button (×). Only dropdown-button (▼) as http://jqueryui.com/demos/autocomplete/#combobox

If you have a longer list of options in your select, so that scroll bar appears on the right side of the dropdown, mouse click on scroll bar hides the dropdown. You can click anywhere on the scroll bar and you should be able to reproduce it every time. Tested on ie9 and ie10 with the current master of your combobox.

You can check live example here (I've just added more options to selects to your official example):
https://dl.dropboxusercontent.com/u/12642849/combobox/index.html

Ok, I just tagged 1.0. Roadmap is as follows:

1. Switch to using a hidden field for holding the data after initialization
2. Bring back the forceMatch option, or some variant of it(combined with 1 allowing traditional combobox functionality)
3. Update to latest bootstrap and refactor to take advantage of improvements in typeahead

Anything on your wishlist? Let me know if you have other things you'd like. I'll be starting a 1.1-wip branch here shortly to bring in these features.

Hi,

When I'm using bootstrap-combobox with another combobox dependent, It doesn't allow set select class="combobox" with jquery.

"https://gist.github.com/4114478.js"

The first combobox has it's correct CSS styles, but second one when it's load with jquery, it looks like a normal non-styled combobox.

What's the solution?

PS: I'm using load jquery function.

I'm trying to mod this a bit but I dont know enough pure JS to allow a to pass its class to the initialized version. I'm I missing an easy way to do this?

Anyone have an opinion on making the new forceMatch option be just the default behavior?

I can see the reasoning behind keyup and keypress events triggering a change; however, there is a distinct difference between typing to find an option (but not yet selecting it) and actually selecting (or deselecting) an option, which should indeed be a change.

This isn't theoretical either, as it actually did cause a problem for me in my implementation, which happens to redraw a view that contains the combobox on a change event (which basically means you're unable to ever type more than 1 letter).

A possible solution (and what I'm currently doing), is to trigger a 'change:keyup' event on a keyup, and only trigger a 'change' event on toggle and select.

I could add a pull request to make this change if you're interested, although I'm hesitant as I could see this potentially affecting somebody else reliant on the current behavior.

It seems that the optionsal forceMatch was removed, so this no longer functions like a true combobox as you are not able to insert free text in the box. Its a select with typeahead.

it would be great to have the ability to enter free text, possibly submitted with a different field name ?

Hi Daniel,

Thanks for that beautiful component ! My combobox markup after .combobox() looks like this :

<div class="combobox-container combobox-selected">
<input type="hidden" name="entrySignal" value="Long">
<input type="text" autocomplete="off" placeholder="">
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown">
   ...
</span>
</div>

What is the simplest way to disable the complete combobox later e.g. based on a value entered in another formfield ?

I expected somehow with the following selector all elements would be disabled :

$("div.combobox-container *").attr('disabled', "disabled");

any ideas ?

thx,

Alain

whats is the recommanded way to validate if the combo-box is not empty when required.

I use this nice validation script for bootstrap.
https://github.com/ReactiveRaven/jqBootstrapValidation
of course I can't work since a new dynamically input field is created

If a user click on the caret icon on the bottom (which is hard, but happens some times) the dropdown/menu is not triggered with an empty button press!!!

this listener works:
$(this.$button).delegate('span.caret', 'keypress', $.proxy(this.toggle, this))

jQuery 1.9 will drop support for $.browser detection.

This is only used in one place in the combobox code, to determine whether or not to proxy a keydown event (only webkit and msie browsers proxy it).

I'm not sure what issue this is intended to fix, and if the issue was with webkit/msie or firefox/opera, but if the issue is no longer present in more recent releases, it may be possible to simply remove the check.

Hi,
I am trying to trigger an event when dropdown item is selected.
I am using this code to create the event
$(".combobox").click(function (e) {
e.preventDefault();
alert('clicked.');
})

It doesn't seem to work.
FYI: I am using asp.dropdownList Control, I think that shouldn't be the problem.

If I use two comboboxes:
<select class="combobox" name="c1">...<select><select class="combobox" name="c2">...<select>
I can't use input-field of second combobox, because focus return to first one

In this situation list of first combobox hidden if i try scroll it by mouse (there were many items in this list)

If the combobox is not showing the values when you have it wrapped inside a combobox, add to bootstrap.css the following code.

[code].typeahead {
z-index: 1051;
}[/code]

I noticed this while looking at the pull request for focus. I'll fix it when I get a chance.

When I call it vía combobox() function, everything goes ok, and your control works awesome. The problem is when I update combo box data menu via ajax.

Your combo doen't realize about the changes. Only way is to call combobox() function after the ajax function, but is not the way I want (I think I can't call combobox() function more than once).

Any workaround? Any kind of help would be really appreciated.

This code looks really great. What license are you releasing it under?

Hi, great plugin!
I've noticed one thing, perhaps a bug?

I have a dropdown that is databound, works fine with your bootstrap-combobox. I now added a OnSelectedIndexChanged event, that shows an extra field based on what is selected in the dropdown.

This work just fine if I press Tab or Enter to select a value. The right value is set after postback.

But if I use the mouse, and click on an item, the dropdown is reset (to default value) after postback.

While using http://www.datatables.net/blog/Twitter_Bootstrap_2,
i thought it would be simple enough to apply the bootstrap-combobox to the default selectbox like this:

$('select[name="membertable_length"]').attr('class', 'combobox');
// make it so.
$('.combobox').combobox();

As i have no control (yet) over the markup generation of the selectbox.
However, i am getting the following error:

Uncaught TypeError: Cannot read property 'webkit' of undefined 

i believe it might have to do with the typeahead plugin. but since bootstrap has a typeahead plugin, and there is also a https://github.com/tcrosen/twitter-bootstrap-typeahead
it is very unclear what typeahead plugin is used!

I've also left these reproduction steps at the datatables forum here:
http://www.datatables.net/forums/discussion/7637/twitter-bootstrap#Item_72

the dropdown menu do not close on outside click, the below code helps...

listener:

$(document.body).on('click', $.proxy(this.outsideclick, this))

function

,
outsideclick : function(e) {
if (this.shown) {
var tngs = this.$button
var cky = e.target
var elmty = this.$element
if (!(tngs[0] == cky || cky == elmty[0])) {
this.hide()
}
}
}

Currently, when you write something in combobox, keyboard up/down changes position of text cursor in combobox. It would be much better if we would be able to use keyboard up/down to select items in drop down list. See http://jqueryui.com/demos/autocomplete/#combobox for an example.

I would love to see some support for in the drop down list. Maybe this already exists and I don't know how to use them, but I've been having trouble getting it working.

Would you consider changing the .dropdown-toggle element from an <a> to a <span>? I've done it locally and works fine.

From a purist perspective, I don't think it semantically qualifies as a link. From a practical point of view, I'm using a custom HTML5 history setup which acts on <a> events, so it got confused here.

When you type:

• The first character of an item
• Shift
• Left or Right arrow

and then press "return" or "enter" to select the item which is highlighted, the textbox loses it's value on blur.

e.g.

1. Open the demo at http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html?
2. Click inside the dropdown
3. Type 'M'
4. Press 'return' to select 'Maryland'
5. Click somewhere else

The value disappears.

If you type a letter which is not the first character, this behaviour is not exhibited.

Tested on:

• Chrome on OSX
• Firefox on OSX
• Safari on OSX
• IE9 on Windows

I have these in a project here that I will bring over soon.

I would like to have submit button either appended to combobox (styled with bootstrap "input-append" class), or at least have it in the same line as combobox.

Currently, my submit button ends up in the new line.

The missing semicolon results in an error when the file bootstrap-combobox.js is concatenated with other scripts.

Nice combobox and I was able to get it to work within minutes.

Would it be possible to have this combobox observe and use the "placeholder" attribute so you could supply a hint to the user as to the intent of the combobox. If you look at "Inline Forms" under http://twitter.github.com/bootstrap/base-css.html#forms you can see what I mean ("email/password" boxes)

(My use case is I have 2 distinct search boxes and really they need to be differentiated)

I can't look at this myself for a few days due to workload and the fact it will take me a little time due to the fact I've only been working with bootstrap for about 3 hours...! Or there may be a way of doing this I have missed....

Chrome Console errors:

[blocked] The page at https://dl.dropboxusercontent.com/u/21368/bootstrap-combobox/index.html ran insecure content from http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.
index.html:1
Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-combobox.js:44
Uncaught ReferenceError: $ is not defined index.html:105

When there are multiple comboboxs on a page and when using mouse to select each of them one at a time, they stay open and it is disturbing! Using

.on('mouseleave', $.proxy(this.blur, this))

• on this.$menu, helps.

I can't make work a combobox clonation made with jquery. The clonation is fine, I see the second combobox, and it has the new name and id correct (clonation works), but the second combobox doesn't show the options. Did you tried clone the combobox? I really need this, much appreciated your help.

I am using boostrap-combobox in Razor engine like @Html.DropDownList("Role",(SelectList)ViewBag.Roles , new { @Class = "combobox" }). It is displaying differently on page.

How to disable typing in combobox?

This would be great so that we can use browser built in HTML5 form validation.

Would like to be able to do everything from the select element so you can initialize multiple comboboxes and use placeholder

It appears there is an issue with IE7 and below with how I am hiding the select. I'll look into this soon.

Can u make new branch ?

Scrollable selectbox:
$('.combobox').combobox('COUNT OF ITEMS TO DISPLAY');

Thanks.

Hi,
I need to do Combo box Onchange or any other event. Is there a way to do that?
If not Is there a way to get an id for the generated textbox? So that I can use that.
Thanks for the help in Advance.

Hello,

First of all thanks for making this plugin. It was very useful for us.

I have an issue where when I use this bootstrap combobox in a div which contains scrollbar,
the rendering of the controls is all wacky when used in IE7. In IE9, it works alright.

Here is a screenshot of the issue I am talking about.

https://skydrive.live.com/redir?resid=B569D2FB9D0FCF54!1134&authkey=!AOtr9S-uHqDwSNA

The screenshot shows me using the comboboxes inside a bootstrap modal but I also tried them inside a normal page with a div which has a scrollable scrollbar and had the same issue there.

Can someone tell me how to fix this issue.
Please let me know if you need more info.

Thanks.