91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<template>
|
|
<div class="relative w-full max-w-lg mx-auto">
|
|
<!-- Search Input -->
|
|
<input
|
|
v-model="query"
|
|
@input="onSearch"
|
|
type="text"
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Search students, classes, or anything..."
|
|
/>
|
|
|
|
<!-- Search Icon -->
|
|
<div v-if="query" class="absolute right-4 top-2 text-gray-500 cursor-pointer" @click="clearSearch">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Search Suggestions (Optional, can be enhanced with data) -->
|
|
<div v-if="results.length > 0 && query" class="absolute mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-md">
|
|
<ul>
|
|
<li
|
|
v-for="result in results"
|
|
:key="result.id"
|
|
class="p-2 cursor-pointer hover:bg-gray-100"
|
|
@click="onSelect(result)"
|
|
>
|
|
{{ result.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const query = ref('')
|
|
const results = ref([])
|
|
|
|
// Dummy data for search suggestions (replace this with API results or store data)
|
|
const allStudents = [
|
|
{ id: 1, name: 'John Doe' },
|
|
{ id: 2, name: 'Jane Smith' },
|
|
{ id: 3, name: 'Robert Johnson' },
|
|
{ id: 4, name: 'Emily Davis' }
|
|
]
|
|
|
|
const onSearch = () => {
|
|
if (query.value) {
|
|
// Simulate search functionality (replace with API call or real data filtering)
|
|
results.value = allStudents.filter(student =>
|
|
student.name.toLowerCase().includes(query.value.toLowerCase())
|
|
)
|
|
} else {
|
|
results.value = []
|
|
}
|
|
}
|
|
|
|
const clearSearch = () => {
|
|
query.value = ''
|
|
results.value = []
|
|
}
|
|
|
|
const onSelect = (result) => {
|
|
// Handle selection (e.g., redirect to student profile or perform other actions)
|
|
console.log('Selected:', result)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Additional styling for the search bar */
|
|
input {
|
|
transition: all 0.3s ease;
|
|
}
|
|
input:focus {
|
|
border-color: #3b82f6;
|
|
}
|
|
</style>
|
|
|