下拉列表到组合框

Question

我正在寻找将 DropDownList 转换为 ComboBox 的简单控件或 jQuery 插件。

我目前正在使用 Ajax 组合框，我已经受够了。我试图使组合框的宽度为 100%，当从组合框调整为所选列表项宽度的列表中选择一个项目时，它们的布局总是搞砸了。

标准的 asp.net DropDownList 可以正常工作并且没有任何这些问题，但是我需要 ComboBox 的自动完成功能。

是否有 jQuery 插件或任何类似的东西我可以调用 document.ready 将标准 asp.net 下拉列表转换为 ajax 组合框样式组合？

到目前为止的代码：

<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>

等：

 <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>

但现在我得到了错误：

对象不支持方法'combobox'的这个属性

Answer 1

我在几个项目中为此使用了jqueryui combobox。

我只是从该示例中复制了脚本，并对它进行了一些特定于项目的更改。

对于 100% 的宽度，您可以尝试如下操作：http://jsfiddle.net/KnBpt/

比Ajax控件工具包版本好很多，它甚至可以在你键入部分名称时找到一个值，asp:Combobox只有在它以你的值开头时才找到它。

要在键入值时使 AutoPostback 起作用，您必须在原始选择元素上触发 .change()：

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

这会在每个 jqueryui 自动完成和组合框的值发生更改时触发 .change()，这将自动触发 AutoPostback（如果设置为 true），而无需知道 ClientID 或任何内容。