Я занимаюсь этим уже 12 с лишним часов, пытаясь заставить его работать на моей странице.Ниже я включу свой код позади (источник списка и получатель), мой jQuery (в заголовок, обернутый в функцию "ready"), и мой элемент управления выпадающего списка asp.net, кнопку и объекты ввода, обернутые в div.Вот комбобокс , который я пытаюсь реализовать.Ничто из того, что я нашел, не помогло.Кажется, проблема в объединении действий и ценностей. А именно, кнопка не переключает раскрывающийся список, чтобы развернуть .
Чтобы упростить , я сделал все комментарии к шапкам в кодовых полях, чтобы указать, где конкретноМне нужна помощь.Осталось устранить только две вещи.Спасибо, maties: -)>
Теперь о коде позади --- (НЕ ОСНОВНОЙ ВОПРОС)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
combobox.DataSource = car_list
combobox.DataBind()
End Sub
Protected car_list As New ArrayList({
"Audi",
"Lexus",
"BMW",
"Ford",
"Chevrolet",
"Jeep",
"Jaguar",
"Toyota",
"Nissan",
"Honda",
"Subaru",
"Hyundai",
"Tesla",
"Mercedez",
"Ferrari"
})
//'This function returns the above list as either a String list, or wrapped in a tag
Function getList(ByVal listName As ArrayList, Optional ByVal tagWrapper As String = "", Optional ByVal tagId As String = "") As String
Dim items As String = "No items in list."
If Not tagWrapper = "" Then //'Return as HTML Tagged Objects, a.k.a. Elements or DOM Objects or Nodes
For Each item In listName
If Not tagId = "" Then
items = "<" + tagWrapper + " id=""" + tagId + """" + ">" //'Used if "id" parameter passed in
items += item.ToString
items += "</" + tagWrapper + ">" & vbCrLf
Else
items = "<" + tagWrapper + ">"
items += item.ToString
items += "</" + tagWrapper + ">" & vbCrLf
End If
Next
Else //'Return as String Array, e.g. ["item1", "item2", "item3"]
For Each item In listName
Dim isFirstItem As Boolean = True
If isFirstItem Then //'Treat the first item differently
isFirstItem = Not isFirstItem
items = item.ToString
Else
items += ", " + item.ToString
End If
Next
End If
Return items
End Function
JQuery (опять же, в заголовке) - ( ЗДЕСЬ БУДЕТDRAGONS! )
$(document).ready(function () {
$("#autocomplete").autocomplete({
delay: 0,
minLength: 0,
autoFocus: true,
//This "source:" function is pulled from the jQuery Combobox link above.
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($("#combobox").children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
//SOMETHING WRONG WITH THE REGEX REPLACE... THE "strong" TAGS ARE COMING THROUGH IN THE DROPDOWN :p
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
} //END "source:"
}); //END ".autocomplete"
$("#combobox").combobox();
//THIS IS WHERE IT'S AT!!
//THE DROPDOWNLIST CONTROL SHOULD BE HIDDEN, BUT THIS BUTTON SHOULD TOGGLE ITS CONTENTS INTO VIEW
//Here is the code used in the "combobox" demo provided on the jQuery UI site, but for some reason
// it doesn't work with mine. The key difference to note is that they created all their DOM
// elements and attached the listeners etc. using the "(function ($) { });" form.
$("#toggle").click(function () {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
});
И, наконец, разметка (с использованием идентификатора в качестве дескриптора)
<form action="#" method="post">
<h2>Choose your favorite car</h2>
<hr />
<div class="ui-widget"> <!-- Autocomplete Combobox -->
<asp:DropDownList ID="combobox" runat="server" ClientIDMode="Static"></asp:DropDownList><br />
<input id="autocomplete" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" style="margin-right:0;" />
<button id="toggle" type="button" tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false" style="margin:0 0 0 -7px;">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text" style="padding:0;"> </span>
</button>
</div>
</form>
Чтобы сделать его немного более понятным, и кнопка, и объекты вводаВнутри поля со списком UI-виджета div должна быть ссылка на элемент управления asp.net.Я не сильно настроен на управление, но я пробовал его в обоих направлениях и безуспешно.
РЕДАКТИРОВАТЬ : WOOHOOOO !!Я сделал следующее изменение и получил источник данных.Теперь мне просто нужно исправить кнопку, чтобы она переключала вид выпадающего списка.
//In the jQuery "source" section I replaced
response(select.children("option").map(function ()
//with
response($("#combobox").children("option").map(function ()