我已经花了12个多的时间来尝试让它在我的页面上工作。下面我将包括我的codebehind（list source＆amp; getter），我的jQuery（在“ready”函数中包含的标题中），以及我的asp.net下拉列表控件，按钮和包含在div中的输入对象。 这是我正在尝试实施的combobox。我发现的任何东西都没有帮助。将行动和价值联系在一起似乎是一个问题。 即，该按钮不会切换下拉列表以展开。
为了方便起见，我在代码框中做了所有大写评论，明确指出我需要帮助的地方。排除故障只剩下两件事了。谢谢你们： - ）＆gt;
现在进入代码隐藏---（不是主要问题）
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();
});
});
最后是标记（使用id作为句柄）
<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-widget div中的按钮和输入对象都应链接到asp.net控件。我并不是很难控制，但我已经尝试过两种方式并且都没有成功。
编辑：WOOHOOOO !!我做了以下更改并使数据源正常工作。现在我只需要修复按钮就可以切换下拉列表的视图。
//In the jQuery "source" section I replaced
response(select.children("option").map(function ()
//with
response($("#combobox").children("option").map(function ()
答案 0 :(得分：1)
这是我几个月前解决的解决方案，现在有时间发布。在将来，我希望修改此Javascript以支持选项组：）
基本上我把我所有的JS推到一个单独的文件中，并调用我的自定义函数传递DropDownList和TextBox我想创建的每个相应的Combobox。使用DataSourceID将DropDownList提供给SqlDataSource，以便从我的数据库填充它。 ASP.NET将其呈现为＆lt; select＆gt;带＆lt;选项＆gt;的元素ListItem中每个DropDownList的元素。 jQuery UI自动完成插件读取这些＆lt; option＆gt;元素并创建一个隐藏的＆lt; ul＆gt;与＆lt; li＆gt;对于每个对应的＆lt;选项＆gt;在＆lt; select＆gt;中元件。这些项目由第response($(ddl).children("option").map(function () {...行找到。请注意，替换孩子＆＃39;找到＆＃39;发现＆＃39;将返回＆lt; optgroup＆gt;内的选项标签也是。
以下是我的标记，它调用JS函数，然后是JS函数本身：
<!-- Head section -->
<script type="text/javascript">
function pageLoad() {
cbsetup("#TextBoxID", "#DropDownBoxID");
});
</script>
<!-- Body section - SAMPLE COMBOBOX -->
<span>
<asp:DropDownList ID="DropDownBoxID" runat="server" DataSourceID="SDS"
DataTextField="Name" DataValueField="ID"></asp:DropDownList>
<asp:TextBox ID="TextBoxID" runat="server" CssClass="combobox
ui-autocomplete-input ui-widget ui-widget-content ui-corner-left"></asp:TextBox>
<!-- I know the button code is particularly nasty, no thanks to jQuery UI.
I just copy/pasted for the most part -->
<button id="ButtonID" type="button" tabindex="-1" title="Show All Items"
class="toggle 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 -5px; height: 23px;">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-button-text" style="padding:0;"> </span>
</button>
</span>
function cbsetup(cb, ddl) {
try {
$(cb).unbind();
$(cb).autocomplete({
delay: 300,
minLength: 0,
autoFocus: true,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($(ddl).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"
), "$1" //"<style=\"text-weight:bold;\">$1</style>"
),
value: text,
option: this
};
}));
},
select: function (event, ui) {
ui.item.option.selected = true;
},
change: function (event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function () {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
});
$(cb).siblings("button.toggle").click(function () {
// close if already visible
if ($(cb).autocomplete("widget").is(":visible")) {
$(cb).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
$(cb).autocomplete("search", "");
$(cb).focus();
});
} /* TRY END */
catch (e) { jAlert(e.name + ', ' + e.message, 'JS Exception Caught'); }
}