我目前正在使用我的网络应用程序中的JuiceUI自动完成控件。
如果我在文本框中键入“a”,我会得到字符串中任何位置都有“a”的所有值。
我只需要显示那些以字母'a'或'ab'等开头的值......
我在stackoverflow上看过这篇文章: jQuery-autocomplete filter match by first letter
这将完全符合我的需要,但我希望将JuiceUI控件保留在我的应用程序中,而无需转换代码,更改我的Web配置和删除引用等...
任何帮助都会很棒。
由于
编辑: html:
asp:TextBox runat="server" ID="_Default" ClientIDMode="Static" Width="95%" />
juice:Autocomplete runat="server" TargetControlID="_Default" ID="JuiceCombo" />
代码背后的代码:
从页面加载事件调用的方法
var c = clubs.Enum_AllClubs.ToList();
// Get club count to build our array for datasource
int clubCount = c.Count();
// _clubNames = new string[clubCount];
for (int i = 0; i < c.Count; i++)
{
Juice.AutocompleteItem newItem = new AutocompleteItem();
newItem.Label = c[i].DisplayName;
newItem.Value = c[i].ClubName;
ITEMS.Add(newItem);
}
JuiceCombo.SourceList = ITEMS;
JuiceCombo.DataBind();
编辑:生成的HTML&amp; Javascript in repsonse发表评论
<script type="text/javascript">
//<![CDATA[
// Juice Initialization
(function() {
if(typeof(window.Juice) !== 'undefined' && window.Juice) {
window.Juice.widgets = [{"widgetName":"autocomplete","id":"_Default","uniqueId":"JuiceCombo","options":{"source":[{"label":"A TEST DISPLAY LABEL1","value":"A TEST VALUE1"},{"label":"B TEST DISPLAY LABEL2","value":"B TEST VALUE2"},{"label":"C TEST DISPLAY LABEL3","value":"C TEST VALUE3"}]},"encodedOptions":[],"events":["open","focus","close","create","response","search","select","change"],"postBacks":[]}];
window.Juice.cssUrl = '/Content/themes/Fresh-Squeezed/jquery-ui-1.9.0.custom.css';
}
})();function WebForm_OnSubmit() {
if (typeof(window.Juice) !== 'undefined' && window.Juice) {
window.Juice.onSubmit();
};
return true;
}
//]]>
</script>
.......
..........
..............
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'mainLoginForm', [], [], [], 90, '');
//]]>
</script>
<input name="_Default" type="text" id="_Default" data-ui-widget="autocomplete" style="width:95%;" class="ui-autocomplete-input" autocomplete="off">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">3 results are available, use up and down arrow keys to navigate.</span>
.......
..........
..............
<input id="_juiceWidgetOptions" name="_juiceWidgetOptions" type="hidden">
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="z-index: 1; display: none; width: 284.77777767181396px; top: 379px; left: 613px;">
<li class="ui-menu-item" role="presentation"><a id="ui-id-2" class="ui-corner-all" tabindex="-1">A TEST VALUE1 & Croquet</a>
</li><li class="ui-menu-item" role="presentation"><a id="ui-id-3" class="ui-corner-all" tabindex="-1">B TEST VALUE1</a>
</li><li class="ui-menu-item" role="presentation"><a id="ui-id-4" class="ui-corner-all" tabindex="-1">C TEST VALUE1</a></li></ul>