45 lines
1.6 KiB
Twig
45 lines
1.6 KiB
Twig
<div class="search-container" id="searchForm">
|
|
<input type="text" id="searchInput" class="search-input" placeholder="Search for electric vehicles, brands, or models..." value="{{ query|default('') }}">
|
|
<button type="button" id="searchButton" class="search-button">Search</button>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchForm = document.getElementById('searchForm');
|
|
const searchInput = document.getElementById('searchInput');
|
|
|
|
function encodeSearchQuery(query) {
|
|
query = query.replace(/[^a-zA-Z0-9+\-\s]/g, '');
|
|
return encodeURIComponent(query);
|
|
}
|
|
|
|
searchForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
const encodedQuery = encodeSearchQuery(query);
|
|
window.location.href = `/s/${encodedQuery}`;
|
|
}
|
|
});
|
|
|
|
searchButton.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
const encodedQuery = encodeSearchQuery(query);
|
|
window.location.href = `/s/${encodedQuery}`;
|
|
}
|
|
});
|
|
|
|
searchInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
const encodedQuery = encodeSearchQuery(query);
|
|
window.location.href = `/s/${encodedQuery}`;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script> |