Javascript 仅用第一个字母填写

我目前正在web应用程序中使用JuiceUI自动完成控件

如果我在文本框中键入“a”，我会得到字符串中任何位置都有“a”的所有值

我只需要显示那些以字母“a”或“ab”等开头的值

我在stackoverflow上看到了这篇帖子：

这将完全满足我的需要，但我希望在我的应用程序中保留JuiceUI控件，而不必交换代码、更改web配置和删除引用等

任何援助都将是巨大的

谢谢

编辑： html:

代码隐藏：

从页面加载事件调用的方法

            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();

编辑：在repsonse中生成HTML和Javascript以进行注释

    <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>

---

如何指定.aspx/code-behind中的可用值列表？根据这一点，我可以试着给你一个解决方案谢谢JotaBe。。刚刚在帖子中添加了代码示例。你能看看生成的HTML和js吗？您应该找到一个调用，将autocomplete小部件附加到具有Juicembo id的元素，以及一个包含传递的元素的JS数组。其想法是注入一些JS来更改autocomplete小部件的源，以使用一个函数来返回从该数组而不是数组本身过滤的值。您可以在任何浏览器（最好是Chrome浏览器）中按F12查找它。这将打开浏览器的开发人员工具。我希望这是可能的。希望这有助于佐塔贝。。。这是生成的相关javascript和选项的html标记等。。。谢谢

    <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>