Adding autocomplete

Pages/Tester.razor

@@ -36,8 +36,26 @@
                 <div class="form-group row">
                     <label for="topic" class="col-2 col-form-label text-right">Topic</label>
                     <div class="col-10">
-                        <div class="input-group">
-                            <input type="text" class="form-control" id="topic" placeholder="topic" @bind="_setting.Topic">
+                        <div class="input-group autocomplete">
+                            <input type="text" class="form-control" id="topic" placeholder="topic" @bind="_setting.Topic" @oninput="OnTypeTopic">
+                            @if (_filteredTopics is not null)
+                            {
+                                <ul class="options">
+                                    @if (_filteredTopics.Any())
+                                    {
+                                        @foreach (var topic in _filteredTopics)
+                                        {
+                                            <li class="option" @onclick=@(_ => SelectionTopic(topic))>
+                                                <span class="option-text">@topic</span>
+                                            </li>
+                                        }
+                                    }
+                                    else
+                                    {
+                                        <li class="disabled option">No results</li>
+                                    }
+                                </ul>
+                            }
                             <div class="input-group-append">
                                 <button class="btn btn-outline-secondary" type="button" data-toggle="modal" data-target="#topicSelectionModal" @onclick="LoadTopics"><span class="oi oi-justify-center"></span></button>
                             </div>    
@@ -325,20 +343,28 @@ else
     <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Topic selection</h5>
+                <h5 class="modal-title">Select your topic</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                @if (_topics.Any())
+                @if (_topics is not null)
                 {
-                    <div class="list-group" id="topiclist" role="tablist">
-                        @foreach (var topic in _topics)
-                        {
-                            <a class="list-group-item list-group-item-action" id="topic-@topic" href="#" data-toggle="list" @ondblclick="() => SelectionTopic(topic)">@topic</a>
-                        }
-                    </div>
+                    @if(_topics.Count > 0)
+                    {
+                        <div class="list-group" id="topiclist" role="tablist">
+                            @foreach (var topic in _topics)
+                            {
+                                <a class="list-group-item list-group-item-action" id="topic-@topic" href="#" data-toggle="list" @ondblclick="() => SelectionTopic(topic)">@topic</a>
+                            }
+                        </div>
+                    }
+                    else
+                    {
+                        <p>No topics found</p>
+                    }
+
                 }
                 else
                 {

Pages/Tester.razor.cs

@@ -11,6 +11,7 @@
 using Microsoft.JSInterop;
 using KafkaTester.Service;
 using Microsoft.AspNetCore.Components.Web;
+using static System.Net.WebRequestMethods;
 
 namespace KafkaTester.Pages
 {
@@ -39,7 +40,8 @@ public partial class Tester
         private string _exportConfigurationString;
         private string _importConfigurationString;
         private readonly List<string> _errors = new();
-        private List<string> _topics = new();
+        private List<string> _topics;
+        private List<string> _filteredTopics;
         private bool _isTopicLoading = false;
 
         protected override async Task OnAfterRenderAsync(bool isFirstRender)
@@ -176,9 +178,18 @@ private void OnSelectSetting(ChangeEventArgs e)
             _setting = setting;
         }
 
+        async Task OnTypeTopic(ChangeEventArgs e)
+        {
+            var filter = e.Value?.ToString();
+            await LoadTopics(null);
+            _filteredTopics = _topics.Where(t => t.Contains(filter ?? string.Empty)).ToList();
+        }
+
         private async Task LoadTopics(MouseEventArgs e)
         {
-            _topics.Clear();
+            if (_topics != null || _isTopicLoading)
+                return;
+
             _isTopicLoading = true;
             var topics = await TesterService.GetTopicsAsync(_setting.Brokers);
             _topics = topics;
@@ -190,6 +201,7 @@ private async Task SelectionTopic(string topic)
         {
             _setting.Topic = topic;
             StateHasChanged();
+            _filteredTopics = null;
             await JsRuntime.InvokeVoidAsync("closeTopicSelectionModal");
         }
 

Pages/_Host.cshtml

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="css/highlight/default.min.css" />
     <link rel="stylesheet" href="css/highlight/a11y-light.min.css" />
+    <link rel="stylesheet" href="css/autocomplete/autocomplete.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="KafkaTester.styles.css" rel="stylesheet" />
 </head>

wwwroot/css/autocomplete/autocomplete.css

@@ -0,0 +1,41 @@
+.autocomplete {
+    position: relative;
+}
+
+    .autocomplete .options {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        background: white;
+        width: 100%;
+        padding: 0;
+        z-index: 10;
+        border: 1px solid #ced4da;
+        border-radius: 0.5rem;
+        box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .autocomplete .option {
+        display: block;
+        padding: 0.25rem;
+        cursor: pointer;
+    }
+
+        .autocomplete .option .option-text {
+            padding: 0.25rem 0.5rem;
+        }
+
+        .autocomplete .option:hover {
+            background: #1E90FF;
+            color: #fff;
+        }
+
+        .autocomplete .option.disabled {
+            background-color: lightgrey;
+            cursor: not-allowed;
+        }
+
+            .autocomplete .option.disabled:hover {
+                background: lightgrey;
+                color: var(--bs-body);
+            }