MVC Application Auto Complete Revision

Read-only forum. Used to announce new releases of EASYProcess.

Locked
JustinVanRegenmorter
Posts: 517
Joined: August 26th, 2021, 9:56 am
Contact:

MVC Application Auto Complete Revision

Unread post by JustinVanRegenmorter »

As of DesignTime Revision 2217 and RunTime Revision 916, textbox auto complete has been implemented in EASYProcess MVC applications. This feature allows the user to set up a textbox to display results that match the already typed in text. Note this feature will only work on new applications unless you add the css below.

To add auto complete to a textbox in MVC just add the new AutoComplete service from the MVCWorkshop to a controller and set it up with values and descriptions. You can also pass in a filter to be able to utilize other fields in the autocomplete.
AutoCompleteMVCService.PNG
It is recommended to use the Input event on the control you want to trigger the auto complete. You can also change the timeout for the input event on that control.
InputTimeout.PNG
Here is an example of the completed textbox with autocomplete.
AutoComplete Example.PNG
AutoComplete Example.PNG (6.68 KiB) Viewed 717 times
AutoComplete Example.PNG
AutoComplete Example.PNG (6.68 KiB) Viewed 717 times
To add textbox auto complete to existing application add the following CSS to the style.css file by checking it out to the developer workbench:

Code: Select all

.autocomplete-items {
            display: none;
            position: absolute;
            min-width: 100px;
            max-height: 280px;
            z-index: 1;
            overflow-y: auto;
            background-color: white;
            border-radius: 3px;
            box-shadow: 0px 0px 1px grey;
        }
        
            .autocomplete-items > option {
                padding: 8px;
                margin: 4px;
                border-radius: 3px;
                border: 1px solid transparent;
                cursor: pointer;
            }
        
                .autocomplete-items > option.hover {
                    border: 1px solid #2484c5;
                    background-color: #175E8E22;
                }
        
        .text-field-wrap:focus-within > .autocomplete-items {
            display: block;
        }
word count: 253

Tags:
Locked