soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Home hero: replace filter dropdowns with a search-engine box (+ live typeahead)
CI/CD / CI · dotnet build (push) Successful in 2m32s
Details
CI/CD / Deploy · hamkadr (push) Successful in 2m0s
Details

Browse Source 
The hero is now a single big search box → /Search (the rich, ranked,
highlighted search across shifts/jobs/applicants), with popular-search
chips. Typeahead is generalized to any form[data-suggest], so the hero box
shows the same instant highlighted dropdown as the header pill.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-08 22:34:31 +03:30
parent 6cf7c6b573
commit bcf90f2437
3 changed files with 70 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
+37 -34
View File
@@ -117,7 +117,7 @@
<a asp-page="/Facilities/Index" class="@(path.StartsWith("/Facilities") ? "active" : null)">مراکز درمانی</a>
<a asp-page="/Calendar/Index" class="@(path.StartsWith("/Calendar") ? "active" : null)">تقویم هفتگی</a>
</nav>
<form class="nav-search" method="get" action="/Search" role="search">
<form class="nav-search" method="get" action="/Search" role="search" data-suggest>
<div class="nav-search-pill">
<input type="search" name="Q" placeholder="جستجو…" aria-label="جستجو" autocomplete="off" />
<button type="submit" aria-label="جستجو">🔎</button>
@@ -228,17 +228,10 @@
});
</script>
@* Instant search suggestions (typeahead) for the header search box. *@
@* Instant search suggestions (typeahead) — attaches to every form[data-suggest]
(header pill + homepage hero). *@
<script>
(function () {
var form = document.querySelector('.nav-search');
if (!form) return;
var input = form.querySelector('input');
var box = document.createElement('div');
box.className = 'nav-search-results';
box.style.display = 'none';
form.appendChild(box);
var timer;
function esc(s) { var d = document.createElement('div'); d.textContent = s == null ? '' : s; return d.innerHTML; }
function hi(text, q) {
var safe = esc(text);
@@ -248,30 +241,40 @@
try { return safe.replace(new RegExp('(' + terms.join('|') + ')', 'gi'), '<mark>$1</mark>'); }
catch (e) { return safe; }
}
function hide() { box.style.display = 'none'; box.innerHTML = ''; }
input.addEventListener('input', function () {
var q = input.value.trim();
clearTimeout(timer);
if (q.length < 2) { hide(); return; }
timer = setTimeout(function () {
fetch('/search/suggest?q=' + encodeURIComponent(q))
.then(function (r) { return r.json(); })
.then(function (items) {
if (!items || !items.length) { hide(); return; }
var html = items.map(function (it) {
var sub = it.sub ? '<span class="ns-sub">' + hi(it.sub, q) + '</span>' : '';
return '<a href="' + it.url + '"><span class="ns-type">' + esc(it.type) +
'</span><span class="ns-text"><span class="ns-label">' + hi(it.label, q) +
'</span>' + sub + '</span></a>';
}).join('');
html += '<a class="ns-all" href="/Search?Q=' + encodeURIComponent(q) + '">همه نتایج برای «' + esc(q) + '» ←</a>';
box.innerHTML = html;
box.style.display = 'block';
}).catch(function () { hide(); });
}, 200);
});
document.addEventListener('click', function (e) { if (!form.contains(e.target)) hide(); });
input.addEventListener('keydown', function (e) { if (e.key === 'Escape') hide(); });
function attach(form) {
var input = form.querySelector('input[type=search], input[name=Q]');
if (!input) return;
var box = document.createElement('div');
box.className = 'nav-search-results';
box.style.display = 'none';
form.appendChild(box);
var timer;
function hide() { box.style.display = 'none'; box.innerHTML = ''; }
input.addEventListener('input', function () {
var q = input.value.trim();
clearTimeout(timer);
if (q.length < 2) { hide(); return; }
timer = setTimeout(function () {
fetch('/search/suggest?q=' + encodeURIComponent(q))
.then(function (r) { return r.json(); })
.then(function (items) {
if (!items || !items.length) { hide(); return; }
var html = items.map(function (it) {
var sub = it.sub ? '<span class="ns-sub">' + hi(it.sub, q) + '</span>' : '';
return '<a href="' + it.url + '"><span class="ns-type">' + esc(it.type) +
'</span><span class="ns-text"><span class="ns-label">' + hi(it.label, q) +
'</span>' + sub + '</span></a>';
}).join('');
html += '<a class="ns-all" href="/Search?Q=' + encodeURIComponent(q) + '">همه نتایج برای «' + esc(q) + '» ←</a>';
box.innerHTML = html;
box.style.display = 'block';
}).catch(function () { hide(); });
}, 200);
});
document.addEventListener('click', function (e) { if (!form.contains(e.target)) hide(); });
input.addEventListener('keydown', function (e) { if (e.key === 'Escape') hide(); });
}
document.querySelectorAll('[data-suggest]').forEach(attach);
})();
</script>