Auto merge of #54609 - kzys:404-search, r=GuillaumeGomez

Add the library search box on the 404 page

It actually has a link to search already, but it would be better to
have the search "box" as like index.md to be consistent.

<style> can be shared with index.md, but these pages currently
use https://doc.rust-lang.org/rust.css directly.

Fixes #14572.

1 files changed, 54 insertions, 21 deletions

diff --git a/src/doc/not_found.md b/src/doc/not_found.md
index f404aa046c1..d26fcfc0168 100644
--- a/src/doc/not_found.md
+++ b/src/doc/not_found.md
@@ -5,6 +5,28 @@
 #TOC { display: none; }
 .header-section-number { display: none; }
 li {list-style-type: none; }
+#search-input {
+    width: calc(100% - 100px);
+}
+#search-but {
+    cursor: pointer;
+}
+#search-but, #search-input {
+    padding: 4px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    outline: none;
+    font-size: 0.7em;
+    background-color: #fff;
+}
+#search-but:hover, #search-input:focus {
+    border-color: #55a9ff;
+}
+#search-from {
+    border: none;
+    padding: 0;
+    font-size: 0.7em;
+}
 </style>
 
 Looks like you've taken a wrong turn.
@@ -13,11 +35,20 @@ Some things that might be helpful to you though:
 
 # Search
 
-<form action="https://duckduckgo.com/">
-    <input type="text" id="site-search" name="q" size="80"></input>
-    <input type="submit" value="Search DuckDuckGo"></form>
-
-Rust doc search: <span id="core-search"></span>
+<div>
+  <form id="search-form" action="https://duckduckgo.com/">
+    <input id="search-input" type="search" name="q"></input>
+    <input type="submit" value="Search" id="search-but">
+    <!--
+      Don't show the options by default,
+      since "From the Standary Library" doesn't work without JavaScript
+    -->
+    <fieldset id="search-from" style="display:none">
+      <label><input name="from" value="library" type="radio"> From the Standard Library</label>
+      <label><input name="from" value="duckduckgo" type="radio" checked> From DuckDuckGo</label>
+    </fieldset>
+  </form>
+</div>
 
 # Reference
 
@@ -44,26 +75,28 @@ function get_url_fragments() {
     return op;
 }
 
-function populate_site_search() {
-    var op = get_url_fragments();
+function on_submit(event) {
+    var form = event.target;
+    var q = form['q'].value;
+
+    event.preventDefault();
 
-    var search = document.getElementById('site-search');
-    search.value = op.join(' ') + " site:doc.rust-lang.org";
+    if (form['from'].value === 'duckduckgo') {
+        document.location.href = form.action + '?q=' + encodeURIComponent(q + ' site:doc.rust-lang.org');
+    } else if (form['from'].value === 'library') {
+        document.location.href = 'std/index.html?search=' + encodeURIComponent(q);
+    }
 }
 
-function populate_rust_search() {
-    var op = get_url_fragments();
-    var lt = op.pop();
+function populate_search() {
+    var form = document.getElementById('search-form');
+    form.addEventListener('submit', on_submit);
+    document.getElementById('search-from').style.display = '';
 
-    // #18540, use a single token
+    form['from'].value = 'library';
 
-    var a = document.createElement("a");
-    a.href = "https://doc.rust-lang.org/core/?search=" + encodeURIComponent(lt);
-    a.textContent = lt;
-    var search = document.getElementById('core-search');
-    search.innerHTML = "";
-    search.appendChild(a);
+    var op = get_url_fragments();
+    document.getElementById('search-input').value = op.join(' ');
 }
-populate_site_search();
-populate_rust_search();
+populate_search();
 </script>