Main Page: Difference between revisions

Revision as of 12:51, 31 March 2025

This page was created by MediaWiki default on 2016-11-24. Last edited by Edgar on 2025-03-31.

MDriven Learn

Learn. Model. Build.

Visualize and design your ideas. Discover more with MDriven documentation, hands-on training, and ready-made models to get the most from MDriven's tools and services.

Documentation

Find technical documentation

Gain understanding through in-depth explanations of the concepts behind the MDriven tools.

Read Documentation

Training

Learn by doing

Practical training and tutorials on MDriven designed to educate and inspire you to model your ideas.

Take Training

Q&A

Ask questions and get help

Write to us your MDriven-related questions and receive quality answers and feedback.

Explore Q&A

Model Examples

Try model samples

Use our unique, pre-built models to build your ideas and achieve your goals.

Browse samples

Best Practices

Explore effective solutions

Our suggestions on how you can maximize the benefits of the MDriven tools to realize business solutions.

Try these Best Practices

@@ Line 68: / Line 68: @@
      <div class="description" style="color: black; font-size: 1em; font-weight: 400; word-wrap: break-word;">Visualize and design your ideas. Discover more with MDriven documentation, hands-on training, and ready-made models to get the most from MDriven's tools and services.</div>
      <div class="input-container" style="width: 100%; height: 2.25em; position: relative; display: flex; align-items: center; background: white; border-radius: 4px; border: 1px #E3E8EE solid;">
-        <div class="search-icon" style="margin-left: 10px;">
+    <div class="search-icon" style="margin-left: 10px;">
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-             </svg>
+        </svg>
+    </div>
+    <!-- Updated form to use Special:CustomSearch -->
+    <form id="custom-search-box" class="form-inline" action="/index.php" method="GET" role="search" style="width:100%;">
+        <!-- Updated hidden input to use CustomSearch -->
+        <input type="hidden" name="title" value="Special:CustomSearch">
+        <!-- New search input field for suggestions -->
+        <input
+            id="customsearch-input"
+            class="search-input"
+            type="text"
+            placeholder="Search MDriven Learn"
+            style="flex-grow: 1; border: none; outline: none; padding-left: 10px;"
+            name="q"
+            autocomplete="off"
+        >
+        <div id="suggestion-container" style="
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+            display: none;
+            z-index: 9999;
+        ">
+             <ul id="suggestion-list" style="list-style: none; margin: 0; padding: 0;"></ul>
          </div>
-     <form id="bs-extendedsearch-box" class="form-inline " action="/index.php" method="GET" role="search" style="width:100%;">
+     </form>
-        <input class="search-input" type="search" placeholder="Search MDriven Learn" style="flex-grow: 1; border: none; outline: none; padding-left: 10px;" name="raw_term" >
+</div>
-     <div id="suggestion-container"></div>
-        <input type="hidden" name="title" value="Special:CustomSearch">
-            <input type="hidden" name="fulltext" value="1">
-        </form>
-    </div>
    </div>
   <div class="image-container" style="flex-shrink: 0; position: absolute; right: 0; top: 3%; z-index: 1;">
@@ Line 111: / Line 136: @@
 {{#widget:Card|heading=Best Practices|display=block|imageIcon=/images/main4.svg|subheading=Explore effective solutions|text=Our suggestions on how you can maximize the benefits of the MDriven tools to realize business solutions.|link=/index.php/BestPractices:Best_Practices|linktext=Try these Best Practices}}
 <html>
+<script>
+  (function() {
+    const input = document.getElementById('customsearch-input');
+    const suggestionsBox = document.getElementById('suggestion-container');
+    const suggestionList = document.getElementById('suggestion-list');
+    let lastFetchController = null;
+    // Hide suggestions
+    function hideSuggestions() {
+      suggestionsBox.style.display = 'none';
+    }
+    // Show suggestions
+    function showSuggestions() {
+      suggestionsBox.style.display = 'block';
+    }
+    // Populate suggestions in the dropdown
+    function updateSuggestions(suggestions) {
+      suggestionList.innerHTML = '';
+      if (!suggestions.length) {
+        hideSuggestions();
+        return;
+      }
+      suggestions.forEach(sugg => {
+        const li = document.createElement('li');
+        li.textContent = sugg;
+        li.style.padding = '8px 12px';
+        li.style.cursor = 'pointer';
+        li.addEventListener('click', () => {
+          input.value = sugg;
+          hideSuggestions();
+        });
+        suggestionList.appendChild(li);
+      });
+      showSuggestions();
+    }
+    // Fetch suggestions on user input
+    input.addEventListener('input', async function() {
+      const query = this.value.trim();
+      if (!query) {
+        hideSuggestions();
+        return;
+      }
+      // Cancel previous fetch if the user types quickly
+      if (lastFetchController) {
+        lastFetchController.abort();
+      }
+      lastFetchController = new AbortController();
+      const signal = lastFetchController.signal;
+      try {
+        const response = await fetch(
+          `https://search-api.mdriven.net/wiki_suggestions?q=${encodeURIComponent(query)}`,
+          { signal }
+        );
+        if (!response.ok) {
+          console.error('Suggestion request failed:', response.statusText);
+          return;
+        }
+        const data = await response.json();
+        updateSuggestions(data);
+      } catch (err) {
+        if (err.name === 'AbortError') {
+          return;
+        }
+        console.error('Error fetching suggestions:', err);
+      }
+    });
+    // Hide suggestions on clicking outside
+    document.addEventListener('click', (e) => {
+      if (!suggestionsBox.contains(e.target) && e.target !== input) {
+        hideSuggestions();
+      }
+    });
+  })();
+</script>
 </div>
 </html>
 {{Edited|July|12|2024}}
 {{Class|scroll}}