동적 검색 필터 구현 가이드: Laravel, jQuery 및 AJAX 활용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: Laravel 프레임워크와 jQuery를 사용하는 웹 개발자
- 난이도: 중간 (Laravel 라우트, 컨트롤러, Blade 뷰 기초 지식 필요)
핵심 요약
- Laravel 10/11과 jQuery를 활용한 AJAX 기반 동적 검색 필터 구현
SupplierController
에서searchSupplier
메서드를 통해 검색 로직 구현DB::table('suppliers')
로 데이터 필터링 후 JSON 응답 반환- Blade 뷰에서
@foreach
로 동적으로 dropdown 옵션 업데이트 $('#paper_supplier').selectpicker('refresh')
로 UI 갱신- AJAX 요청 핵심:
$.ajax()
사용,GET
메서드로filter
및search
파라미터 전송
섹션별 세부 요약
1. Prerequisites (필수 조건)
- Laravel 10/11 프로젝트 설정
- jQuery CDN 또는 Laravel Mix/Vite로 포함
- 라우트, 컨트롤러, Blade 뷰 기초 지식
- 예시:
Schema::create('suppliers', ...)
로 데이터베이스 마이그레이션 생성
2. Blade 뷰에서의 UI 구현
@if(isset($suppliers))
로 조건에 따른 dropdown 옵션 동적 생성- 예시:
option value="{{ $supplier->supplier_id }}">{{ $supplier->business_type }}
3. jQuery를 통한 AJAX 요청 처리
$('.search_suppliar').on('click', ...)
이벤트 핸들러 정의$.ajax()
로GET
요청 전송,filter
및search
파라미터 전달- 응답 처리:
response.suppliers
데이터로 dropdown 옵션 재구성 $('#paper_supplier').find('option').not(':first').remove()
로 기존 옵션 제거
4. Laravel 라우트 및 컨트롤러 설정
routes/web.php
에Route::get('/search-supplier', ...)
정의SupplierController
의searchSupplier
메서드에서DB::table('suppliers')
로status=1
조건 필터링business_name
또는business_type
에 따라LIKE
검색 수행
5. 추가 고려사항
- Form Request 검증 사용 권장
- Repository/Service Layer 구조로 컨트롤러 로직 분리
- 대규모 데이터셋 처리 시 결과 제한 또는 페이징 적용
- Middleware 적용으로 라우트 보호
결론
- AJAX를 활용한 실시간 검색 기능은 사용자 경험 개선에 효과적
- Laravel + jQuery 구조로 간단한 UI 갱신 가능
- 확장성: 페이징, 체인드 드롭다운, Vue/React 기반 인터페이스로 확장 가능
- 핵심 팁:
selectpicker('refresh')
사용하여 UI 즉시 갱신, JSON 응답으로 효율적 데이터 전송