开发者

dropdownlist to combobox

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=开发者_C百科"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'


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜