# Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng một modal chọn lựa có khả năng tìm kiếm nhanh với Laravel và Alpine.js. Hướng dẫn này sẽ giúp bạn thực hiện một cách đơn giản và hiệu quả cho các tập dữ liệu nhỏ đến trung bình. ## Công nghệ sử dụng - **Laravel**: Framework phát triển backend mạnh mẽ. - **Alpine.js**: Thư viện JavaScript nhẹ để tạo tính tương tác. - **Tailwind CSS**: Framework thiết kế với các lớp tiện ích. ## Cách tiếp cận ### 1. Tính toán dữ liệu tìm kiếm trước Thực hiện công việc nặng nề một lần trong quá trình render: ```php // Tính toán văn bản tìm kiếm cho mỗi mục $searchText = strtolower($item['name'] . ' ' . $item['description']); ``` ### 2. Sử dụng Alpine.js cho tìm kiếm và chọn lựa Một component đơn giản sử dụng Alpine.js: ```javascript { search: '', hasResults: true, selectedValue: '', init() { this.$watch('search', () => this.filterItems()); }, filterItems() { const searchLower = this.search.toLowerCase().trim(); const cards = this.$el.querySelectorAll('.item-card'); let visibleCount = 0; cards.forEach(card => { const text = card.dataset.searchText || ''; const isVisible = searchLower === '' || text.includes(searchLower); card.style.display = isVisible ? '' : 'none'; if (isVisible) visibleCount++; }); this.hasResults = visibleCount > 0; } } ``` ### 3. Cấu trúc HTML cơ bản ```html

Mẫu liên hệ

Mẫu liên hệ đơn giản

Không tìm thấy mục nào

``` ## Lợi ích chính ### Phản hồi tìm kiếm tức thì - Không có yêu cầu đến server trong quá trình tìm kiếm. - Thao tác trực tiếp với DOM để tăng tốc độ. - Thích hợp cho tối đa 50 mục. ### Tiến bộ theo từng bước - Hoạt động bình thường ngay cả khi không có JavaScript (giảm thiểu sự cố). - Có thể truy cập mặc định. - Thân thiện với thiết bị di động. ### Bảo trì đơn giản - Không có quản lý trạng thái phức tạp. - Dễ dàng gỡ lỗi và mở rộng. - Tuân theo các mẫu chuẩn của Laravel. ## Mẹo tối ưu hiệu suất **Tính toán trước khi có thể:** ```php // Thực hiện một lần trong quá trình render, không phải trong quá trình tìm kiếm $searchText = strtolower($title . ' ' . $description); ``` **Sử dụng thao tác DOM trực tiếp:** ```javascript // Nhanh hơn so với virtual DOM cho các tập dữ liệu nhỏ card.style.display = isVisible ? '' : 'none'; ``` **Tự động lấy nét để cải thiện trải nghiệm người dùng:** ```javascript this.$nextTick(() => this.$refs.searchInput?.focus()); ``` ## Khi nào nên sử dụng cách tiếp cận này **Thích hợp cho:** - Tập dữ liệu nhỏ đến trung bình (< 50 mục). - Yêu cầu tìm kiếm thời gian thực. - Logic lọc đơn giản. - Ứng dụng Laravel. **Xem xét các lựa chọn thay thế cho:** - Tập dữ liệu lớn (> 100 mục). - Thuật toán tìm kiếm phức tạp. - Xử lý dữ liệu nặng. ## Bài học quan trọng 1. **Bắt đầu đơn giản** - Thao tác DOM cơ bản thường vượt trội hơn so với các giải pháp phức tạp. 2. **Tính toán trước khi có thể** - Thực hiện công việc nặng nề một lần, không lặp lại. 3. **Tiến bộ theo từng bước** - Xây dựng một nền tảng hoạt động trước. 4. **Alpine.js tỏa sáng** - Hoàn hảo cho các tương tác trong biểu mẫu và tính tương tác đơn giản. ## Ví dụ hoàn chỉnh Dưới đây là một triển khai đầy đủ bạn có thể sao chép và điều chỉnh: ```php {{-- Component kiểm tra nhanh --}} @php $items = [ 'contact' => ['name' => 'Mẫu liên hệ', 'description' => 'Mẫu liên hệ đơn giản', 'category' => 'Kinh doanh'], 'survey' => ['name' => 'Mẫu khảo sát', 'description' => 'Khảo sát nhiều câu hỏi', 'category' => 'Nghiên cứu'], 'registration' => ['name' => 'Đăng ký sự kiện', 'description' => 'Biểu mẫu đăng ký sự kiện', 'category' => 'Sự kiện'], 'newsletter' => ['name' => 'Đăng ký bản tin', 'description' => 'Biểu mẫu đăng ký email', 'category' => 'Marketing'], 'feedback' => ['name' => 'Mẫu phản hồi', 'description' => 'Thu thập phản hồi của khách hàng', 'category' => 'Hỗ trợ'], ]; @endphp Component Tìm kiếm

Kiểm tra: Component Tìm kiếm Thời gian Thực

@foreach ($items as $value => $item) @php $searchText = strtolower($item['name'] . ' ' . $item['description'] . ' ' . $item['category']); @endphp

@endforeach

Không tìm thấy mục nào

Hãy thử điều chỉnh các thuật ngữ tìm kiếm của bạn

Tìm kiếm hiện tại:

Có kết quả:

Đã chọn:

``` ## Cách sử dụng 1. **Tạo component** - Lưu đoạn mã trên dưới dạng một component Blade. 2. **Bao gồm nó** - Sử dụng `` trong các view của bạn. 3. **Tùy chỉnh dữ liệu** - Thay thế mảng `$items` bằng dữ liệu của bạn. 4. **Phong cách** - Điều chỉnh các lớp Tailwind để phù hợp với thiết kế của bạn. ## Chi tiết triển khai chính **Văn bản tìm kiếm đã tính toán trước:** ```php $searchText = strtolower($item['name'] . ' ' . $item['description'] . ' ' . $item['category']); ``` **Lọc bằng Alpine.js:** ```javascript cards.forEach(card => { const text = card.dataset.searchText || ''; const isVisible = searchLower === '' || text.includes(searchLower); card.style.display = isVisible ? '' : 'none'; if (isVisible) visibleCount++; }); ``` **Phản hồi trực quan khi chọn:** ```javascript :class="selectedValue === '{{ $value }}' ? 'border-blue-600 bg-blue-50' : 'border-gray-300'" ``` Cách tiếp cận này có thể mở rộng tốt cho các trường hợp sử dụng điển hình và có thể được cải tiến sau này nếu yêu cầu phát triển. --- *Hướng dẫn này cho thấy cách tiếp cận được sử dụng trong FilaForms - hạ tầng biểu mẫu Laravel cho phát triển nhanh chóng.*

Mẫu liên hệ

Kiểm tra: Component Tìm kiếm Thời gian Thực

{{ $item['name'] }}

Bài viết về chủ đề#alpine

Tổng hợp các bài viết về #alpine

Tìm kiếm thời gian thực với Laravel & Alpine.js#webdev#laravel#livewire#alpine

Chủ đề phổ biến

Tìm kiếm thời gian thực với Laravel & Alpine.js