dropdownlist to combobox

Question

Im looking for a simple control or jQuery plugin that convert a DropDownList to a ComboBox.

Im currently using the Ajax Combo Box which I have just about had enough off. Im trying to make the combobox 100% width and they layout always gets screwed up when an item is selected from the list where the combobox resizes to the width of the selected list item.

The standard asp.net DropDownList just works and doesnt have any of these issues, however I require the autocomplete functionality of the ComboBox.

Is there a jQuery plugin or anything similar I can just call on document.ready to convert standard asp.net dropdown lists to ajax combo box style combo?

Code So far:

<script src="../../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=ddlProjectCode.ClientID %>').combobox();
        alert('test');
    });

</script>

etc:

 <asp:DropDownList ID="ddlProjectCode" runat="server" AppendDataBoundItems="True" AutoCompleteMode="SuggestAppend"
                                AutoPostBack="True" DropDownStyle="DropDownList" RenderMode="Block" Width="100px"
                                OnSelectedIndexChanged="ddlProjectCode_SelectedIndexChanged" CssClass="comboBoxInsideModalPopup">
                            </asp:DropDownList>

But now i get the error:

object does not support this property of method 'combobox'

Willem · Accepted Answer · 2011-07-29T13:48:38.200

2

I'm using the jqueryui combobox for this in several projects.

I simply copied the script from that example and made some project specific changes to it.

For the 100% width you can try something like this: http://jsfiddle.net/KnBpt/

Works a lot better than the Ajax control toolkit version, it can even find a value when you type a part of the name, the asp:Combobox only finds it if it starts with your value.

To make AutoPostback work when typing a value, you'll have to trigger the .change() on the original select element:

$('.ui-autocomplete-input').bind('autocompleteselect', function(){ 
    $(this).prev('select').change();
});

This triggers a .change() for every jqueryui autocomplete and combobox when their value changes, and that will automatically trigger the AutoPostback (if set to true), without knowing the ClientID or anything.

edited Jul 29 '11 at 13:48

answered Jul 28 '11 at 14:21

Willem

5,364
2
23
44

thanks, im now trying to see if i can directly change one control with the other as this is what i was hoping for. $(document).ready(function () { $('#<%=ddlProjectCode.ClientID %>').combobox(); alert('test'); }); – WraithNath Jul 28 '11 at 14:46
I just get the error object does not support this property of method 'combobox' I have references to the following scripts, what am i missing? – WraithNath Jul 28 '11 at 14:50
just make sure you load all scripts and styles that are needed and it should work. (it also works in my asp.net websites) You need to include the combobox custom script, see my jsfiddle or source code of the jqueryui demo: $.widget( "ui.combobox", {...}); – Willem Jul 28 '11 at 14:53
ah so I have to also also include all of the custom javascript and not just reference the 2 jq libraries and call .combobox()? its the simplicity of doing something like $('#dropdownlist').combobox(); that im looking for – WraithNath Jul 28 '11 at 14:58
It does work like $('#dropdownlist').combobox(). Just load the extra script in another .js file and include it after all other scripts (because it needs them to be loaded). – Willem Jul 28 '11 at 15:04
Thanks, that appears to work! now all I need to do i work out how to fire the selected index changed in my cs code behind file when an item is selected. Any Ideas? – WraithNath Jul 28 '11 at 15:25
I think AutoPostback=true for your ddl will still work. I have no visual studio available right now to test, so give it a try – Willem Jul 28 '11 at 22:04
nearly have the postback working with the changes made in this post. http://stackoverflow.com/questions/6862207/jquery-combobox-losing-styling-after-postback it works when selecting a list item, just need to make it fire when a user types an item and hits enter. please comment on the other post if you have any suggestions :) – WraithNath Jul 29 '11 at 07:42

dropdownlist to combobox

1 Answers1

Linked