清單高速搜尋與篩選外掛

若使用 kintone 標準的搜尋功能，必須經過以下步驟：

1. 點擊篩選器圖示
2. 逐一設定搜尋條件
3. 點擊「套用」按鈕
4. 畫面重新載入，輸出結果

最少也需要 4 個以上的動作，與一般的網路服務相比相當費工。

為了減輕這道工序，市面上已有幾款提供替代搜尋功能的外掛，但多數應該都是以下的步驟：

1. 在頁首等處預先顯示的輸入欄位中輸入文字
2. 點擊「搜尋」按鈕
3. 畫面重新載入，輸出結果

而運用本外掛，只需「輸入文字」這一個動作，就能在不重新載入畫面的情況下立即顯示搜尋結果。

此外，kintone 的欄位搜尋有其限制：日文必須輸入 2 個字以上，英文字母與數字則只能以單字為單位搜尋。

使用本外掛後，各欄位皆可以單一字元為單位進行搜尋。

原始碼全部公開於 GitHub，可免費使用。

首先請先看看示範。

示範

記錄清單的操作

如同文章開頭所展示的，啟用外掛後，清單旁會加入搜尋欄位。只要在搜尋欄位輸入字串，結果就會立即反映。

您甚至不需要點擊搜尋按鈕。

設定畫面的操作

這是設定畫面。

由於也能從既有的清單匯入欄位資訊，即使是為了驗證而暫時使用，也能輕鬆完成設定。

外掛提供的功能

• 高速的顯示與搜尋
• 可以單一字元為單位搜尋
• AND 搜尋
• 限定於特定欄位的搜尋
• 以年、月、日為單位搜尋日期欄位

卡片形式顯示

本外掛提供「清單形式」與「卡片形式」兩種顯示形式。

選擇卡片形式後，即可將清單中的每一筆記錄顯示為卡片。

若記錄含有圖片欄位，以卡片形式顯示時就能在清單上直接確認圖片，打造出更易於閱讀的清單。

我們也提供了可從清單變更顯示形式的選項。

適合使用本外掛的情境

需要頻繁進行篩選的場合

最適合需要一邊變換條件、一邊比較與編輯多筆資料的業務。

需要組合多項搜尋條件進行搜尋的場合

在需要進行複雜資料分析或詳細資料篩選的場合，本外掛就能派上用場。

預期會從智慧型手機使用的場合

本外掛在設計時已考量行動裝置上的操作性，即使外出也能迅速存取資料。

能實現高速搜尋的理由

外掛自有的搜尋引擎

sequenceDiagram
    participant U as 使用者
    participant V as 外掛清單
    participant E as 搜尋引擎
    participant K as kintone API

    Note over V,K: 清單顯示時（初始化）
    V->>K: 一次取得記錄（每次 500 筆）
    K-->>E: 記錄資料
    E->>E: 保存至快取

    Note over U,E: 搜尋時
    U->>V: 輸入文字
    V->>E: 從快取搜尋
    E-->>V: 符合的記錄
    V->>V: 只重繪差異部分
    Note over U,V: 不消耗 API，立即顯示結果

其他多數搜尋外掛，都是以外掛的搜尋欄位去呼叫 kintone 標準搜尋功能的方式實作。

相對地，本外掛從搜尋引擎本身重新設計，不使用標準的搜尋功能，而是實作了自有的搜尋系統。

當啟用外掛的清單顯示時，外掛會以最佳化的流程開始取得資訊，並依序建立快取。

如此一來，既能確保初次顯示的速度，又能在使用者於搜尋欄位輸入文字的瞬間，從已快取的資訊立即顯示結果。

順帶一提，若要更詳細地描述前述搜尋引擎的運作機制，會如下所示。（這部分有一半是我的自我滿足，不必勉強理解也沒關係）

sequenceDiagram
  participant U as 使用者
  participant V as 外掛清單
  participant C as 持久化快取(IndexedDB)
  participant E as 搜尋引擎
  participant K as kintone API

  Note over V,C: 清單顯示時（初始化）
  V->>C: 讀取上次的持久化快取

  alt 有快取(SWR)
    C-->>V: 上次的記錄
    V->>E: 保存至快取
    V-->>U: 立即顯示清單
    Note over V,K: 在背後進行差異同步（不讓顯示等待）
    V->>K: 以「更新時間 >= 上次的最大更新時間」取得差異 + 確認總筆數
    K-->>V: 已變更的記錄／總筆數
    alt 一致性 OK
      V->>V: 合併差異
      V->>C: 保存更新後的快取
      V->>E: 替換顯示中的資料
    else 偵測到不一致（刪除、脫離篩選條件等）
      V->>K: 重新取得全部記錄（每次 500 筆）
      K-->>E: 記錄資料
      E->>E: 保存至快取
      V->>C: 保存為新的快取
    else 同步失敗
      V-->>U: 顯示「顯示內容可能已過時」（快取內容繼續顯示）
    end
  else 無快取／初次使用
    V->>K: 一次取得記錄（每次 500 筆）
    K-->>E: 記錄資料
    E->>E: 保存至快取
    V->>C: 保存為持久化快取
  end

  Note over U,E: 搜尋時
  U->>V: 輸入文字
  V->>E: 從快取搜尋
  E-->>V: 符合的記錄
  V->>V: 只重繪差異部分
  Note over U,V: 不消耗 API，立即顯示結果

記住計算結果的機制

清單的顯示除了取得記錄之外，還需要排序、與其他記錄建立關聯等各種運算。

本外掛不只是單純快取所有記錄，還會將「已完成排序的資料」「已完成其他記錄關聯的資料」等清單顯示所需的運算結果一併快取，讓搜尋時不必重新運算，藉此提升效能。

例如當排序順序不變、只變更搜尋關鍵字時，使用「已完成排序的資料」進行搜尋，就不必再重新排序，可提升搜尋結果的顯示速度。

防抖動（Debounce）機制

外掛單次顯示的記錄筆數為 100 筆，但若使用者每輸入一個字就重新顯示這 100 筆資料，依裝置規格不同，效能有可能因此下降。

為此，當使用者連續在搜尋欄位輸入文字時，即使前一次的輸入結果尚未顯示於畫面，只要偵測到下一次輸入，就會改為顯示新的搜尋結果。

如此一來即可避免不必要的重繪，提升效能。

每列成本的最佳化

本外掛實現了清單每一列資訊量的最佳化，以及重新顯示時的成本最小化。

kintone 標準清單與其他搜尋外掛在換頁或搜尋時，會重繪整個清單；而本外掛只更新清單各列本身的資訊，將重繪成本壓到最低。

此外，若搜尋後顯示的內容並未改變就不會進行重繪，只更新新增或減少的資料列，藉此提升效能。

設定步驟

建立外掛專用的空白清單

本外掛會完整使用 1 個清單。

請從應用程式的設定畫面 →「清單」新增一個清單，並進行以下設定。

完成以上設定後，請先更新一次應用程式。

外掛只能參照已更新的清單。

外掛的設定

在「顯示表格的清單設定」中，選擇以前述方式建立的清單。

接著在「表格顯示欄位的設定」中選擇實際要在清單顯示的欄位，設定即告完成。

API 使用次數沒問題嗎？

看完示範後會產生這個疑問的您，想必是熟悉 kintone 的資深使用者。而本外掛在設計時也已充分考量這一點。

本外掛 在清單顯示時會以最少的 API 使用次數一次取得記錄，並將資料加以快取。

透過事先非同步取得資料，藉此提升搜尋效能。

因此，並不會每在搜尋欄位輸入一個字就消耗一次 API 使用次數，最多也只會消耗

應用程式的總記錄筆數 / 500

這樣的使用次數。

聯絡我們

若您發現外掛的問題，或有新增功能的需求，歡迎透過畫面上方的導覽列與我們聯繫。

外掛的原始碼

本外掛為開源專案。 原始碼公開於 GitHub，任何人都能自由查閱。

若您對詳細的實作內容或架構有興趣，請透過本頁上方的「查看原始碼」按鈕前往儲存庫。