MVC Application Auto Complete Revision

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

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.

Here is an example of the completed textbox with autocomplete.

AutoComplete Example.PNG (6.68 KiB) Viewed 1340 times

AutoComplete Example.PNG (6.68 KiB) Viewed 1340 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;
        }