feat: Add OData integration and demo for AutoComplete component

Author: mashrulhaque

samples/AutoComplete.Playground/AutoComplete.Playground.csproj

@@ -3,6 +3,7 @@
   <ItemGroup>
     <ProjectReference Include="..\..\src\EasyAppDev.Blazor.AutoComplete\EasyAppDev.Blazor.AutoComplete.csproj" />
     <ProjectReference Include="..\..\src\EasyAppDev.Blazor.AutoComplete.AI\EasyAppDev.Blazor.AutoComplete.AI.csproj" />
+    <ProjectReference Include="..\..\src\EasyAppDev.Blazor.AutoComplete.OData\EasyAppDev.Blazor.AutoComplete.OData.csproj" />
   </ItemGroup>
 
   <ItemGroup>

samples/AutoComplete.Playground/Components/Layout/NavMenu.razor

@@ -31,5 +31,11 @@
                 <span class="bi bi-robot-nav-menu" aria-hidden="true"></span> AI Semantic Search
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="odata-demo">
+                <span class="bi bi-database-nav-menu" aria-hidden="true"></span> OData Integration
+            </NavLink>
+        </div>
     </nav>
 </div>

samples/AutoComplete.Playground/Components/Pages/AIDemo.razor

@@ -11,6 +11,9 @@
 <div class="playground-section">
     <h2>AI Model Selection</h2>
     <p>Select from popular AI models with detailed information</p>
+    <div class="alert alert-light border mb-3">
+        <strong>Try typing:</strong> <code>GPT</code>, <code>Claude</code>, <code>Llama</code>, <code>Gemini</code>, <code>DALL</code>
+    </div>
 
     <AutoComplete TItem="AIModel"
                   Items="@aiModels"
@@ -50,6 +53,9 @@
 <div class="playground-section">
     <h2>Programming Language & Framework</h2>
     <p>Grouped by category</p>
+    <div class="alert alert-light border mb-3">
+        <strong>Try typing:</strong> <code>Python</code>, <code>React</code>, <code>Blazor</code>, <code>Torch</code> (grouped by Language/Framework)
+    </div>
 
     <AutoComplete TItem="ProgrammingTech"
                   Items="@programmingTechs"
@@ -88,6 +94,9 @@
 <div class="playground-section">
     <h2>AI Tools & Services</h2>
     <p>Search through AI tools and services</p>
+    <div class="alert alert-light border mb-3">
+        <strong>Try typing:</strong> <code>Chat</code>, <code>Copilot</code>, <code>Midjourney</code>, <code>Hugging</code>, <code>Lang</code>
+    </div>
 
     <AutoComplete TItem="AITool"
                   Items="@aiTools"
@@ -121,6 +130,9 @@
 <div class="playground-section">
     <h2>Machine Learning Frameworks</h2>
     <p>Large dataset with virtualization enabled</p>
+    <div class="alert alert-light border mb-3">
+        <strong>Try typing:</strong> <code>Tensor</code>, <code>Keras</code>, <code>XGBoost</code>, <code>ML Framework</code> (100 items with virtualization)
+    </div>
 
     <AutoComplete TItem="MLFramework"
                   Items="@mlFrameworks"
@@ -153,6 +165,9 @@
 <div class="playground-section">
     <h2>AI Prompt Templates</h2>
     <p>Custom template showcase with min search length</p>
+    <div class="alert alert-light border mb-3">
+        <strong>Try typing (min 2 chars):</strong> <code>Code</code>, <code>Bug</code>, <code>Test</code>, <code>SQL</code>, <code>API</code>
+    </div>
 
     <AutoComplete TItem="PromptTemplate"
                   Items="@promptTemplates"

samples/AutoComplete.Playground/Components/Pages/AllFeaturesShowcase.razor

@@ -18,6 +18,9 @@
             <h2 class="mb-0">Quick Start - Basic Usage</h2>
         </div>
         <div class="card-body">
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing:</strong> <code>Lap</code>, <code>Mouse</code>, <code>Chair</code>, <code>Desk</code>
+            </div>
             <AutoComplete TItem="Product"
                           Items="@products"
                           TextField="@(p => p.Name)"
@@ -40,6 +43,9 @@
         </div>
         <div class="card-body">
             <p class="text-muted">Search across Name, Category, and Description simultaneously</p>
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing:</strong> <code>ergonomic</code> (finds chair & mouse), <code>RGB</code> (finds keyboard), <code>Electronics</code> (category search)
+            </div>
             <AutoComplete TItem="Product"
                           Items="@products"
                           TextField="@(p => p.Name)"
@@ -61,6 +67,9 @@
         </div>
         <div class="card-body">
             <p class="text-muted">Eliminate custom ItemTemplate boilerplate</p>
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing in any box:</strong> <code>Lap</code>, <code>Key</code>, <code>Mon</code>, <code>Pen</code>
+            </div>
 
             <div class="row">
                 <div class="col-md-6 mb-4">
@@ -189,6 +198,9 @@
             <h2 class="mb-0">Grouping</h2>
         </div>
         <div class="card-body">
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing:</strong> <code>a</code> or <code>e</code> (see items grouped by category: Electronics, Furniture, Stationery)
+            </div>
             <div class="row">
                 <div class="col-md-6 mb-3">
                     <h5>Default Headers</h5>
@@ -227,6 +239,9 @@
         </div>
         <div class="card-body">
             <p class="text-muted">Handle large datasets efficiently - generates 5,000 items</p>
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing:</strong> <code>Premium</code>, <code>Standard</code>, <code>Budget</code>, <code>Product 100</code>, <code>Item 500</code>
+            </div>
             <AutoComplete TItem="Product"
                           Items="@largeDataset"
                           TextField="@(p => p.Name)"
@@ -248,6 +263,9 @@
         </div>
         <div class="card-body">
             <p class="text-muted">9 pre-configured Bootstrap 5 color schemes</p>
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing in each:</strong> <code>Lap</code>, <code>Des</code>, <code>Web</code> - notice the different color themes
+            </div>
             <div class="row">
                 <div class="col-md-4 mb-3">
                     <label class="form-label"><strong>Primary</strong></label>
@@ -320,6 +338,9 @@
             <h2 class="mb-0">Custom Templates</h2>
         </div>
         <div class="card-body">
+            <div class="alert alert-light border mb-3">
+                <strong>Try typing:</strong> <code>Lap</code>, <code>Chair</code> (see rich template) or <code>xyz</code> (see "No results" template)
+            </div>
             <AutoComplete TItem="Product"
                           Items="@products"
                           TextField="@(p => p.Name)"