0

I am currently using the JuiceUI autocomplete control in my web application.

If i type 'a' into my textbox I get all values where there is an 'a' anywhere in the string.

I need to display only those values which start with the letter 'a' or 'ab' etc...

I seen this post on stackoverflow : jQuery-autocomplete filter match by first letter

This will do exactly what I need but I would like to keep the JuiceUI control in my application without having to go and swap out code, change my web config and remove references etc...

Any assistance would be great.

Thanks

EDIT: html :

asp:TextBox runat="server" ID="_Default" ClientIDMode="Static" Width="95%" />
juice:Autocomplete runat="server" TargetControlID="_Default" ID="JuiceCombo"  />

code behind:

Method called from page load event

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

EDIT : Generated HTML & Javascript in repsonse to comment

    <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>
Community
  • 1
  • 1
Kev
  • 743
  • 2
  • 14
  • 32
  • How do you specify the list of available values in you .aspx / code behind? Depending on that I can try to give you a solution – JotaBe Jun 26 '14 at 12:16
  • thanks JotaBe.. just added code example to post. – Kev Jun 26 '14 at 12:45
  • Can you have a look at the HTML and js generated? You should find a call to attach the autocomplete widget to the element with `JuiceCombo` id, and a JS array which contains the passed elements. The idea is to inject some JS to change the source of the autocomplete widget to use a function that returns the values filtered from that array (instead of the array itself). You can look for it pressing F12 in any browser (preferably Chrome). This opens the developer tools of the browser. I hope it will be possible. – JotaBe Jun 26 '14 at 17:17
  • Hope that helps JotaBe... thats the relevent javascript generated and the html mark up for the options etc... thanks! – Kev Jun 26 '14 at 19:52

0 Answers0