diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index df973863d5..6695c57b13 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -1216,3 +1216,20 @@ iframe.status {
.overflow-shadows--bottom-only {
box-shadow: inset 0px -21px 18px -20px var(--bs-body-color);
}
+
+#navbar-doc-search-wrapper {
+ position: relative;
+}
+
+#navbar-doc-search-results {
+ max-height: 400px;
+ overflow-y: auto;
+ min-width: auto;
+ left: 0;
+ right: 0;
+
+ .dropdown-item {
+ white-space: normal;
+ overflow-wrap: break-word;
+ }
+}
diff --git a/ietf/static/js/navbar-doc-search.js b/ietf/static/js/navbar-doc-search.js
new file mode 100644
index 0000000000..c36c032310
--- /dev/null
+++ b/ietf/static/js/navbar-doc-search.js
@@ -0,0 +1,113 @@
+$(function () {
+ var $input = $('#navbar-doc-search');
+ var $results = $('#navbar-doc-search-results');
+ var ajaxUrl = $input.data('ajax-url');
+ var debounceTimer = null;
+ var highlightedIndex = -1;
+ var keyboardHighlight = false;
+ var currentItems = [];
+
+ function showDropdown() {
+ $results.addClass('show');
+ }
+
+ function hideDropdown() {
+ $results.removeClass('show');
+ highlightedIndex = -1;
+ keyboardHighlight = false;
+ updateHighlight();
+ }
+
+ function updateHighlight() {
+ $results.find('.dropdown-item').removeClass('active');
+ if (highlightedIndex >= 0 && highlightedIndex < currentItems.length) {
+ $results.find('.dropdown-item').eq(highlightedIndex).addClass('active');
+ }
+ }
+
+ function doSearch(query) {
+ if (query.length < 2) {
+ hideDropdown();
+ return;
+ }
+ $.ajax({
+ url: ajaxUrl,
+ dataType: 'json',
+ data: { q: query },
+ success: function (data) {
+ currentItems = data;
+ highlightedIndex = -1;
+ $results.empty();
+ if (data.length === 0) {
+ $results.append('
No results found');
+ } else {
+ data.forEach(function (item) {
+ var $li = $('');
+ var $a = $('' + item.text + '');
+ $li.append($a);
+ $results.append($li);
+ });
+ }
+ showDropdown();
+ }
+ });
+ }
+
+ $input.on('input', function () {
+ clearTimeout(debounceTimer);
+ var query = $(this).val().trim();
+ debounceTimer = setTimeout(function () {
+ doSearch(query);
+ }, 250);
+ });
+
+ $input.on('keydown', function (e) {
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ if (highlightedIndex < currentItems.length - 1) {
+ highlightedIndex++;
+ keyboardHighlight = true;
+ updateHighlight();
+ }
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ if (highlightedIndex > 0) {
+ highlightedIndex--;
+ keyboardHighlight = true;
+ updateHighlight();
+ }
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ if (keyboardHighlight && highlightedIndex >= 0 && highlightedIndex < currentItems.length) {
+ window.location.href = currentItems[highlightedIndex].url;
+ } else {
+ var query = $(this).val().trim();
+ if (query) {
+ window.location.href = '/doc/search/?name=' + encodeURIComponent(query) + '&rfcs=on&activedrafts=on&olddrafts=on';
+ }
+ }
+ } else if (e.key === 'Escape') {
+ hideDropdown();
+ $input.blur();
+ }
+ });
+
+ // Hover highlights (visual only — Enter still submits the text)
+ $results.on('mouseenter', '.dropdown-item', function () {
+ highlightedIndex = $results.find('.dropdown-item').index(this);
+ keyboardHighlight = false;
+ updateHighlight();
+ });
+
+ $results.on('mouseleave', '.dropdown-item', function () {
+ highlightedIndex = -1;
+ updateHighlight();
+ });
+
+ // Click outside closes dropdown
+ $(document).on('click', function (e) {
+ if (!$(e.target).closest('#navbar-doc-search-wrapper').length) {
+ hideDropdown();
+ }
+ });
+});
diff --git a/ietf/templates/base.html b/ietf/templates/base.html
index 25ce50c467..b0df04f30a 100644
--- a/ietf/templates/base.html
+++ b/ietf/templates/base.html
@@ -67,13 +67,17 @@
{% endif %}
-
+
+
+
+