Juice UI仅通过首字母自动填充

时间:2014-06-26 11:53:48

标签: javascript jquery asp.net ajax juice-ui

我目前正在使用我的网络应用程序中的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 &amp; 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>

0 个答案:

没有答案