Auto-Completion-List in app designer

Hello,

Do you have any idea how to integrate in an app designer application an auto-completion or auto filter list to a text field or even better to the drop down? I have a file that contains hundreds of variables to plot, and to facilitate the user to find the desired variable this auto filter list proposes the variable after typing the first letter, the second... I found this code that executes exactly what I want "auto filter list" but I don't know how to integrate it to app designer. And do I have to enter each variable name by hand.

The code:

strs = {'This','is','test1','test2'}; strList = java.util.ArrayList; for idx = 1 : length(strs), strList.add(strs{idx}); end jPanelObj = com.mathworks.widgets.AutoCompletionList(strList,''); javacomponent(jPanelObj.getComponent, [10,10,200,100], gcf);

Link:

https://undocumentedmatlab.com/matlab/wp-content/cache/all/articles/auto-completion-widget/index.html Je vous remercie d'avance

Answer 1

[Satyam]

Hi @amakoba yim,

The Java code snippet provided cannot be integrated with ‘App Designer’ because Java components are not supported by ‘App Designer’ or ‘uifigures’. Refer to the following MATLAB answer post to learn more.

https://www.mathworks.com/matlabcentral/answers/396625-how-can-i-put-a-javacomponent-in-the-app-designer

There is a workaround to implement an auto-complete list in App Designer. First, create an 'EditField' for user input and a 'ListBox' to display suggestions. The 'ListBox' should be initially hidden. Define a list of potential words or phrases for the autocomplete feature. Use the 'ValueChangingFcn' callback of the 'EditField' to capture real-time user input. Within this callback, filter the list of words to find matches that start with the current input text. Update the 'ListBox' with these matches and make it visible if there are suggestions; otherwise, keep it hidden. Additionally, set up a 'ValueChangedFcn' for the 'ListBox' to update the 'EditField' with the selected suggestion and hide the 'ListBox' once a selection is made.

Here is the implementation of the above approach.

classdef AutoCompletionApp < matlab.apps.AppBase

    properties (Access = public)
        UIFigure    matlab.ui.Figure
        EditField   matlab.ui.control.EditField
        SuggestionsListBox matlab.ui.control.ListBox
    end
    
    properties (Access = private)
        WordsList = {'This', 'is', 'test1', 'test2', 'example', 'autocomplete', 'app'};
    end

    methods (Access = private)

        % Value changing function: EditField
        function EditFieldValueChanging(app, event)
            inputText = event.Value;  
            if isempty(inputText)
                app.SuggestionsListBox.Items = {};
                app.SuggestionsListBox.Visible = 'off';
                return;
            end
            
            % Find matches
            matches = app.WordsList(startsWith(app.WordsList, inputText, 'IgnoreCase', true));
            if ~isempty(matches)
                app.SuggestionsListBox.Items = matches;
                app.SuggestionsListBox.Visible = 'on';
            else
                app.SuggestionsListBox.Visible = 'off';
            end
        end
        
        % Callback for selecting a suggestion
        function SuggestionsListBoxValueChanged(app, event)
            selectedSuggestion = app.SuggestionsListBox.Value;
            if ~isempty(selectedSuggestion)
                app.EditField.Value = selectedSuggestion;
                app.SuggestionsListBox.Visible = 'off'; % Hide suggestions after selection
            end
        end
    end

    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure
            app.UIFigure = uifigure;
            app.UIFigure.Position = [100 100 300 250];
            app.UIFigure.Name = 'MATLAB App with Autocomplete';

            % Create EditField
            app.EditField = uieditfield(app.UIFigure, 'text');
            app.EditField.Position = [20 200 260 22];
            app.EditField.ValueChangingFcn = createCallbackFcn(app, @EditFieldValueChanging, true);

            % Create SuggestionsListBox
            app.SuggestionsListBox = uilistbox(app.UIFigure);
            app.SuggestionsListBox.Position = [20 150 260 50];
            app.SuggestionsListBox.Visible = 'off'; 
            app.SuggestionsListBox.ValueChangedFcn = createCallbackFcn(app, @SuggestionsListBoxValueChanged, true);
        end
    end

    methods (Access = public)
        function app = AutoCompletionApp
            createComponents(app)
        end
        function delete(app)
            delete(app.UIFigure)
        end
    end
end

Hope this helps.