выпадающий список в выпадающий список

Question

Я ищу простой плагин для элемента управления или jQuery, который конвертирует DropDownList в ComboBox.

В настоящее время я использую Ajax Combo Box, который у меня уже был достаточно отключен. Я пытаюсь сделать поле со списком шириной 100%, и его расположение всегда искажается, когда элемент выбирается из списка, где размер поля со списком изменяется до ширины выбранного элемента списка.

Стандартный asp.net DropDownList просто работает и не имеет ни одной из этих проблем, однако мне требуется функция автозаполнения ComboBox.

Есть ли плагин jQuery или что-то подобное, что я могу просто вызвать на document.ready, чтобы преобразовать стандартные выпадающие списки asp.net в комбинированный стиль ajax combo box?

Код Пока:

<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 для этого в нескольких проектах.

Я просто скопировал скрипт из этого примера и внес в него некоторые специфические для проекта изменения.

Для ширины 100% вы можете попробовать что-то вроде этого: http://jsfiddle.net/KnBpt/

Работает намного лучше, чем версия инструментария управления Ajax, он может даже найти значение при вводе части имени, asp: Combobox находит его только в том случае, если он начинается с вашего значения.

Чтобы заставить AutoPostback работатьпри вводе значения вам нужно будет запускать .change () для исходного элемента select:

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

. Это вызывает .change () для каждого автозаполнения и комбинированного списка jqueryui при изменении их значения, иэто автоматически вызовет AutoPostback (если установлено значение true), не зная ClientID или чего-либо еще.