怎么用tp5.1 + layui做搜索功能

# 怎么用TP5.1 + Layui做搜索功能

在Web開發中，搜索功能是提升用戶體驗的核心組件之一。本文將介紹如何基于ThinkPHP5.1框架和Layui前端框架實現一個基礎的搜索功能。

## 一、準備工作

1. 確保已安裝TP5.1框架
2. 引入Layui前端庫（建議使用2.x版本）
3. 創建數據庫表（示例表名為`article`）

## 二、后端實現（TP5.1）

### 1. 創建控制器方法

```php
// application/index/controller/Article.php
public function search()
{
    $keyword = input('get.keyword');
    $list = Db::name('article')
        ->where('title|content', 'like', "%{$keyword}%")
        ->paginate(10);
    return json(['code' => 0, 'data' => $list]);
}

2. 配置路由

// route/route.php
Route::get('article/search', 'index/article/search');

三、前端實現（Layui）

1. HTML結構

<div class="layui-form-item">
    <div class="layui-input-inline">
        <input type="text" id="keyword" placeholder="請輸入關鍵詞" class="layui-input">
    </div>
    <button class="layui-btn" id="search-btn">搜索</button>
</div>
<table id="result-table" lay-filter="result"></table>

2. JavaScript邏輯

layui.use(['table', 'jquery'], function(){
    var table = layui.table;
    var $ = layui.jquery;
    
    // 初始化表格
    table.render({
        elem: '#result-table',
        url: '/article/search',
        cols: [[
            {field: 'id', title: 'ID'},
            {field: 'title', title: '標題'},
            {field: 'content', title: '內容'}
        ]]
    });
    
    // 搜索按鈕事件
    $('#search-btn').click(function(){
        var keyword = $('#keyword').val();
        table.reload('result-table', {
            where: { keyword: keyword }
        });
    });
});

四、功能優化

1. 添加防抖處理（減少請求頻率）
2. 實現高亮顯示關鍵詞
3. 添加無結果提示
4. 支持多條件組合查詢

五、總結

通過TP5.1的后端處理和Layui的前端交互，我們快速實現了搜索功能。實際項目中可根據需求擴展更多功能，如搜索結果排序、分類篩選等。

提示：記得在搜索字段上建立數據庫索引以提高查詢效率 “`