danielfarrell / bootstrap-combobox Goto Github PK
View Code? Open in Web Editor NEWA combobox plugin that works with twitter bootstrap
A combobox plugin that works with twitter bootstrap
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
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.
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.
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?
I noticed this while looking at the pull request for focus. I'll fix it when I get a chance.
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))
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....
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.
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?
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]
Like this:
http://i.imgur.com/4QfgB.jpg
with Bootstrap 2.1.0
Anyone have an opinion on making the new forceMatch option be just the default behavior?
It appears there is an issue with IE7 and below with how I am hiding the select. I'll look into this soon.
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 ?
This would be great so that we can use browser built in HTML5 form validation.
I cant use the combobox with inline form. the element is wrapped by a div which seem to always fall onto a new line
The missing semicolon results in an error when the file bootstrap-combobox.js is concatenated with other scripts.
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:
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()
}
}
}
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.
Original selectbox can have own styles class like "span12".
This script have to overwrite it and copy to the rendered one.
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.
Make, pls, version without close-button (×). Only dropdown-button (▼) as http://jqueryui.com/demos/autocomplete/#combobox
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.
Would like to be able to do everything from the select element so you can initialize multiple comboboxes and use placeholder
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))
This code looks really great. What license are you releasing it under?
I have these in a project here that I will bring over soon.
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?
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.
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.
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
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.
Can u make new branch ?
Scrollable selectbox:
$('.combobox').combobox('COUNT OF ITEMS TO DISPLAY');
Thanks.
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.
Ok, I just tagged 1.0. Roadmap is as follows:
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.
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
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
When you type:
and then press "return" or "enter" to select the item which is highlighted, the textbox loses it's value on blur.
e.g.
The value disappears.
If you type a letter which is not the first character, this behaviour is not exhibited.
Tested on:
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.
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.
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.
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
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.