Web 應用程式中的即時搜尋:搜尋引擎、人工智慧和使用者體驗

最後更新: 4月2025
  • 即時搜尋無需重新加載頁面即可立即返回結果,從而顯著改善用戶體驗。
  • Algolia 和 Elasticsearch 等引擎,以及 Web API 和人工智慧,使您能夠建立強大且高度可自訂的搜尋引擎。
  • Laravel 等框架和原生 Android 元件簡化了具有自動完成和建議功能的搜尋引擎的技術實作。
  • 即時分析和謹慎的隱私管理是優化和個人化搜尋而不失去用戶信任的關鍵。

Web 應用程式中的即時搜尋

在 Web 應用程式中,即時搜尋已成為提供敏捷、相關且無縫體驗的關鍵要素。從使用者輸入時即可推薦產品的電商網站,到即時更新的分析儀錶盤,使用者不再希望等待頁面載入以查看結果。

同時,支撐這一切的工具和服務生態系統也十分龐大:例如 Algolia 或 Elasticsearch 等搜尋引擎、與 Web API 的整合、使用 Laravel 和 JavaScript 建立的自訂搜尋引擎、Android 原生搜尋元件、Clicky 或 Fathom 等即時分析系統,以及 Google 的 Web 和 App Activity 等隱私設定。了解所有這些元件如何協同工作,對於選擇合適的架構以及控製成本、效能和資料至關重要。

Web 應用程式中的即時搜尋是什麼?為什麼它如此重要?

我們所說的即時搜索,指的是這樣一種介面:當用戶輸入查詢內容時,應用程式會立即向伺服器(或外部搜尋引擎)發送請求,處理訊息,並在不重新加載頁面的情況下更新搜尋結果。所有這些操作的延遲都非常低,因此使用者體驗幾乎是瞬間完成的。

在數位體驗中,提供快速準確的搜尋不再是“錦上添花”,而是至關重要的成功因素。糟糕的內部搜尋功能會導致轉換率下降、跳出率升高,並讓用戶感到沮喪;而精心設計的搜尋功能則可以延長用戶停留時間,提高購買可能性,並提升用戶對應用程式的整體滿意度。

即時搜尋不再局限於網站上的傳統文字方塊。如今,它融合了自動完成、動態篩選、拼字糾錯、基於歷史記錄的個人化搜索,甚至還包括由人工智慧模型根據從網路即時獲取的數據生成的答案。

搜尋引擎和即時搜尋服務的生態系統

在目前的市場環境下,即時搜尋解決方案生態系統十分豐富,涵蓋了從高階SaaS引擎到完全可自訂的底層API等各種類型。每種工具都有其自身的優勢、成本和理想應用場景。

在「搜尋即服務」領域,Algolia是最知名的公司之一。它提供基於雲端的搜尋引擎,幾乎可以即時提供搜尋結果,並具有可配置的相關性以及眾多專為網頁和行動應用程式設計的功能。

它的運作原理是在其伺服器上對資料進行索引。索引完成後,查詢將使用高度最佳化的演算法(內部採用二分查找、倒排索引和其他最佳化等結構和技術)進行解析,即使在包含大量記錄的集合中,也能在毫秒內傳回結果。

Algolia 的突出之處在於它包含諸多功能,例如分面搜尋、匹配高亮顯示、拼寫錯誤容錯、同義詞以及基於屬性或規則的相關性調整。這使得開發者能夠專注於使用者體驗,而不是搜尋引擎複雜的工程設計。

例如,在網上商店中,可以提供搜尋功能,用戶只需輸入“運動鞋”,即可即時看到相關產品,並按品牌、價格或尺寸進行篩選。在內容平台上,可以輕鬆實現按類別、日期或標籤篩選的功能,例如,搜尋「科技」即可將搜尋結果限定為最近 30 天內的文章。在招聘網站上,即時搜尋可以包含職位名稱、地點、薪資範圍和其他屬性,從而提供非常流暢的使用者體驗。

由於其完善的 API 文件和支援多種語言(JavaScript、PHP、Laravel 等)的客戶端,技術整合非常方便。只需將記錄上傳到相應的索引,然後在前端使用其 SDK 執行查詢並即時顯示結果即可。

Elasticsearch及其整合生態系統

Elasticsearch 是一個基於 Lucene 構建的搜尋和分析引擎,旨在索引海量資料並快速提供搜尋結果。它最大的優勢之一是其廣泛的整合生態系統以及對幾乎任何來源資料的適應能力。

該平台擁有超過350 種集成,涵蓋數據連接器、語言用戶端、數據導入管道和視覺化工具。這使您可以與資料緊密協作,無論資料儲存在日誌、資料庫、事件佇列或檔案中,並建立​​近乎即時更新的搜尋索引。

透過其 REST API 和官方用戶端,可以傳送文件、更新索引,並執行包含篩選、聚合、排序和自訂相關性的複雜查詢。 Elasticsearch 在監控、可觀測性、日誌記錄和分析應用程式中尤其受歡迎,但也用於需要高級搜尋功能的 Web 應用程式。

  使用 Pterodactyl 創建本地 Minecraft 伺服器的完整指南

其架構的靈活性和聚合能力使其能夠將全文搜尋與指標、圖表和儀表板相結合,所有這些都基於相同的數據。因此,當即時搜尋是更廣泛的分析平台的一部分時,它是一個極具吸引力的選擇。

與「即插即用」的 SaaS 相比,它是一種技術性更強的解決方案,通常需要更多的配置、維護和調整工作,但作為回報,它可以對指標、資源和成本進行精細控制。

利用人工智慧和搜尋引擎結果頁面API實現即時網路搜尋和成本分析

除了在特定應用程式內進行搜尋之外,人們越來越希望訪問網路上的即時訊息,並將其與人工智慧模型相結合,以產生最新的答案。一種廣泛使用的方法是利用已經整合了網路搜尋和語言模型的應用程式介面(API)。

一個實際的例子是將Perplexity API 與 SONAR 模型結合使用,這樣就可以向網路發送查詢並取得基於檢索結果產生的回應。這種解決方案能夠提供最新的準確性和上下文信息,但成本較高。根據上述案例,每 1000 次呼叫大約需要 5 美元,實際成本可能略高一些。

鑑於這種情況,由此產生了一些合乎邏輯的問題:是否有可能透過將搜尋引擎結果頁面 (SERP) API 與 ChatGPT 等模型或其他更經濟的 LLM 相結合來降低成本?

理論上可以:你可以使用廉價的 SERP API 來檢索鏈接,然後使用更經濟實惠的 AI 模型來處理和總結資訊。

然而,在實踐中,將搜尋引擎結果頁面 (SERP) API 與其他語言學習管理系統 (LLM) 結合使用通常速度較慢,並且在許多情況下會產生品質較低的結果,因為工作流程涉及多次呼叫、HTML 解析或額外的文字擷取。所有這些都會抵消部分成本節省,並使架構更加複雜。

其他替代方案包括專用的網路搜尋 API,例如Cloudsway 網路搜尋 API,旨在為企業環境提供速度、準確性和可擴展性。這些 API 通常著重於搜尋結果的品質和基礎設施效能,因此易於用作即時回應系統的基礎。

使用 Laravel 和 JavaScript 實作即時搜尋引擎。

如果您更傾向於自行建立解決方案,Web 應用中一個非常常見的模式是使用 Laravel 作為後端框架,JavaScript 作為前端框架來實現即時搜尋引擎。其想法很簡單:使用者在文字方塊中輸入內容,JavaScript 向伺服器發送非同步請求,Laravel 查詢資料庫並以 JSON 格式傳回結果,無需重新載入頁面即可顯示結果。

基本流程包括:定義一個 Eloquent 模型來表示要搜尋的表格(例如,一個與國家/地區表格關聯的Country模型),在 Laravel 中設定 HTTP 路由來處理搜尋,建立一個控制器來處理 AJAX 請求,以及設計一個包含搜尋輸入和必要 JavaScript 程式碼的視圖。

在 Eloquent 模型中,通常會將`$guarded`留空數組,以便進行批量分配,並在表未使用`created_at`和`updated_at`列時停用時間戳。這使得與記錄的互動更加直接,同時在接收用戶資料時仍能保持安全性。

關於路由,通常的做法是定義一個 GET 路由來顯示帶有搜尋欄的視圖,以及一個 POST 路由(或帶有參數的 GET 請求)來處理搜尋。例如,一個 ` /search`路由指向檢視控制器的 `index` 方法,另一個路由指向 `search` 方法,該方法讀取提交的文字並查詢資料庫。

搜尋控制器會檢查請求是否為 AJAX 請求,如果是,則對模型執行查詢(例如,使用LIKE 按名稱篩選並將結果限制為 10 個元素),並傳回一個包含成功指示符、訊息和找到的資料的 JSON 結構。這大大簡化了客戶端 JavaScript 將要處理的回應。

在視圖(例如welcome.blade.php )中,會建立一個包含搜尋欄位和結果容器的表單。為了在 Laravel 中啟用安全的 POST 請求並正確配置 fetch 請求頭,請務必包含帶有CSRF 令牌的meta 標籤。

此 JavaScript 腳本為搜尋框新增了一個事件監聽器,該監聽器會在每次按鍵(keyup 事件)時觸發。在這個事件處理程序中,它會向搜尋引擎發送一個 fetch 請求,請求體中包含當前文本,並設定 Content-Type、X-Requested-With 和 CSRF 令牌等標頭。當回應到達時,它會轉換為 JSON 格式,產生 HTML 程式碼(例如,一個包含 li 標籤的 <ul> 列表,每個結果對應一個 <li> 標籤),並將其插入到結果容器中。

  微軟推出 Dragon Copilot:改變醫療文件的人工智慧

這種模式可以建立一個輕量級的搜尋引擎,而無需像 jQuery、Axios 或 Vue 這樣的額外庫,從而有助於保持良好的載入速度,尤其是在您已經使用像 Bootstrap 這樣重量級的樣式框架的情況下。對於中小型專案而言,此解決方案綽綽有餘且易於維護。

Android 中的輔助搜尋:SearchView、Intent 和建議

在行動環境中,Android 提供了原生機制來實現即時輔助搜索,既可以透過浮動搜尋對話框,也可以透過可以放置在介面中的 SearchView 小工具(例如,在應用程式欄中或佈局中)。

搜尋對話框是一個系統管理的元件,當使用者啟動時,它會顯示在螢幕頂部。 Android會處理此對話方塊中的所有事件:它會擷取查詢、傳送已配置的建議,並在搜尋啟動時產生一個指向特定搜尋 Activity 的 ACTION_SEARCH 操作的 Intent。

SearchView 元件是一個可以放置在佈局中的視圖,預設情況下,它會充當普通的文字欄位。但是,如果配置為與 Android 搜尋系統配合使用,它可以將查詢委託給搜尋活動、顯示搜尋建議,並像標準對話方塊一樣處理語音搜尋。

要啟用此功能,您需要在 XML 中建立搜尋設定檔(通常是 res/xml 中的 searchable.xml),在其中定義搜尋框的行為:標籤、說明文字(提示)、語音選項、建議功能等。根元素是 <searchable>,您必須至少包含一個 android:label 屬性,理想情況下,還應包含 android:hint 屬性。

接下來,在 AndroidManifest 檔案中聲明一個搜尋 Activity,該 Activity 接收 ACTION_SEARCH 操作,並透過包含 android:name="android.app.searchable" 和對應 XML 資源的 <meta-data> 元素與該配置關聯。此 Activity 將負責接收搜尋意圖、提取查詢並顯示結果。

當使用者執行搜尋操作時,搜尋活動會接收到包含 ACTION_SEARCH 操作的 Intent 以及一個包含使用者輸入文字的附加 QUERY。開發者可以據此查詢本機資料庫、遠端資料或其他任何資訊來源,並使用適配器(例如,如果使用 SQLite,則可以使用 CursorAdapter)在 RecyclerView 中顯示結果。

該搜尋可以在 SQLite 資料庫上運行,使用全文搜尋 (FTS3)來提高長文本的效能和相關性,也可以在線上資料上運行,在這種情況下,建議在等待網路結果時顯示進度指示器。

搜尋對話方塊可以更深入地整合到應用程式體驗中:可以將搜尋活動設定為singleTop 啟動模式,以避免用戶執行多次連續搜尋時建立多個實例,並且可以透過 APP_DATA Bundle 傳遞額外的上下文數據,以根據啟動搜尋的畫面來優化搜尋。

SearchView 小工具還允許您自訂許多方面:新增一個明確的提交按鈕(而不是僅依靠 Enter 鍵),啟用建議查詢增強功能(以便插入和編輯建議),並在圖示化狀態(僅圖示)和完全可見的搜尋框之間切換。

如果將小工具作為操作視圖放置在應用程式列中,則需要注意,在小螢幕上空間可能不足,選單項目最終可能會出現在展開的選單中。在這種情況下,建議在點擊小工具時使用 `onSearchRequested()` 啟動搜尋對話框,從而根據上下文將小工具和對話框組合在一起。

最後,Android 允許您透過在搜尋設定中使用 `android:voiceSearchMode` 屬性,將麥克風按鈕整合到對話方塊或控制項中,從而新增語音搜尋功能。這樣,轉錄的查詢將直接發送到搜尋活動。但是,值得評估應用程式的使用模式是否適合這種流程,因為使用者在啟動搜尋之前沒有機會查看識別出的文字。

即時分析以衡量搜尋使用情況

實現即時搜尋只是成功的一半;另一半在於分析用戶如何使用它。一些分析工具可以提供即時或低延遲的指標,幫助您了解用戶正在搜尋什麼、使用哪些設備以及他們如何與搜尋結果互動。

  快速應用程式開發模型

Adobe Analytics是一款針對企業環境的進階分析解決方案,可用於收集和分析多通路數據,例如頁面瀏覽量、獨立訪客、購買記錄、訂單歸因、轉換漏斗和客戶旅程。它可與網站、電子郵件和應用程式集成,並支援建立詳細的儀表板和高度精確的細分。

對於尋求開放解決方案的項目,Matomo(原名 Piwik)提供了一個開源的、可自行託管的網路分析平台,該平台能夠收集非抽樣數據,包括網站流量、電子商務、目標、事件和自訂細分。如果您希望更好地掌控數據,並且不想使用封閉的 SaaS 解決方案,那麼 Matomo 是一個極具吸引力的選擇。

Clicky是另一個分析工具,其亮點在於即時性,幾乎可以即時顯示活躍訪客、頁面瀏覽量和事件等數據。它可用於監控流量高峰期或特定行銷活動期間的搜尋使用情況,並快速偵測相關性或效能問題。

另一方面,Fathom則更注重簡潔性和隱私保護,提供瀏覽量、獨立訪客、平均停留時間、跳出率、目標完成率、流量來源、國家/地區、設備和瀏覽器等基本指標,並明確強調資料保護。這對於那些既想遵守隱私法規又不想犧牲搜尋使用情況概覽的用戶來說,可能非常實用。

網路和應用程式中的隱私、個人化和活動

即時搜尋功能越來越依賴用戶行為數據來個人化搜尋結果:搜尋歷史記錄、造訪的頁面、先前的互動等等。在Google生態系統中,關鍵組件之一是與使用者帳戶關聯的「網路與應用程式活動記錄」設定。

啟用此選項後,系統會將您的搜尋記錄和在其他 Google 服務中的活動保存下來,從而提供更個人化的體驗,例如更快、更相關的搜尋結果、更實用的應用程式以及相關的內容推薦。這些訊號用於推斷用戶興趣,並改進產品以及檢測詐欺或濫用行為。

使用者可以隨時在「帳戶活動控制」或「我的活動」部分停用此設定或刪除歷史活動記錄。他們還可以要求查看完整歷史記錄時進行額外的驗證步驟,從而提高儲存資訊的安全性。

如果您使用 Chrome 等瀏覽器,也可以選擇將您的瀏覽記錄、在使用 Google 服務的網站和應用程式上的活動以及您的語音和音訊活動都納入其中。所有這些資訊都可用於進一步個人化搜尋結果,無論您在線上還是在某些情況下離線瀏覽。

需要注意的是,瀏覽器歷史記錄(無論是否使用Google瀏覽器)都會保存搜尋記錄和造訪過的網站,而使用隱身模式等隱私模式可以阻止這些活動被本地記錄。從開發者的角度來看,至關重要的是要公開透明地說明收集哪些數據、如何使用這些數據,並提供清晰的同意和控制選項。

在企業或教育環境中,與網路和應用程式活動相關的某些功能可能取決於組織 Google 帳戶管理員的配置,這限制了可自訂的程度以及這些資料如何與內部應用程式整合。

在設計即時搜尋系統時,考慮所有這些隱私影響至關重要,這既是出於法律原因,也是為了建立用戶信任。在個人化和尊重隱私之間取得良好的平衡,對於應用程式的普及和用戶評價至關重要。

目前Web應用中的即時搜尋格局融合了強大的搜尋引擎、人工智慧整合、Laravel等框架、原生Android工具、分析工具以及交織的隱私和個人化層。選擇合適的架構——無論是Algolia或Elasticsearch之類的解決方案、使用Laravel和JavaScript構建的自訂搜尋引擎,還是與Android搜尋系統的深度整合——都涉及對資料量、預算和隱私需求的評估。精心設計的方案能夠提供快速、相關且安全的搜索,並符合當前用戶的期望。

什麼是 Google Search Live
相關文章:
什麼是 Search Live?谷歌全新的對話式多模式搜尋是如何運作的?