深入淺出 autocomplete
•
1 like•3,747 views
autocomplete 是現代軟體服務最重要的特性之一，使用者在輸入框輸入了文字，軟體服務就會回傳最適當的選項給使用者，而使用者可以依照回傳的各個選項中選擇其中一個執行動作。 一般的技術文章，大都從前端的角度探討如何在輸入文字時，利用 debounce 和 throttle 這兩個技術，提升使用者的操作體驗及減少後端的負擔。極少探討後端如何實作 autocomplete 的資料結構，讓資料能夠快速回傳給前端。 這次的分享主要就是完全從後端的角度來探討如何利用 Redis 或 Elasticsearch 這類 NoSQL 實作 autocomplete，也會分享多個 autocomplete 常見的情境。 最後也會分享進入正式環境時的技術選型，應該用 Redis 還是用 Elasticsearch 比較好。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 深入淺出 autocomplete
Similar to 深入淺出 autocomplete (20)
More from Mu Chun Wang
More from Mu Chun Wang (20)
深入淺出 autocomplete
- 2. Kewang ● 王慕羣 Kewang ● JavaScript / Java ● PostgreSQL / MongoDB / Elasticsearch / HBase ● Git / DevOps ● 熱愛開源 Linkedin Linkedin kewangtw kewangtw SlideShare SlideShare kewang kewang Gmail Gmail cpckewang cpckewang Facebook Facebook Kewang 的資訊進化論 Kewang 的資訊進化論 devopsday taipei devopsday taipei '17 '17 hadoopcon hadoopcon '14 '15 '14 '15 jcconf jcconf '16 '17 '18 '16 '17 '18 GitHub GitHub kewang kewang Funliday Funliday kewang kewang mopcon mopcon '14 '20 '14 '20 modernweb modernweb '18 '19 '20 '21 '18 '19 '20 '21 coscup coscup '20 '21 '20 '21
- 4. 4 分享的內容
- 5. 5 分享的內容
- 7. 7 分享的內容 1.一點點的前端 autocomplete Live DEMO 2.在後端使用 Redis 實作 autocomplete
- 8. 8 分享的內容 1.一點點的前端 autocomplete Live DEMO 2.在後端使用 Redis 實作 autocomplete 3.在後端使用 Elasticsearch 實作 autocomplete
- 9. 9 分享的內容 1.一點點的前端 autocomplete Live DEMO 2.在後端使用 Redis 實作 autocomplete 3.在後端使用 Elasticsearch 實作 autocomplete 4.各種使用情境
- 10. 10 開始
- 12. 12 什麼是 autocomplete ？ ● 將使用者輸入的文字，使用前綴比對 (prefix match) 資料庫，成功回傳對應的待選詞 (candidates)
- 13. 13 什麼是 autocomplete ？ ● 將使用者輸入的文字，使用前綴比對 (prefix match) 資料庫，成功回傳對應的待選詞 (candidates) ● 從使用者輸入文字到回傳待選詞的速度要夠快
- 16. 16 以往的 autocomplete 分享 ● debounce ：同樣 function 連續觸發時只執行一次
- 17. 17 以往的 autocomplete 分享 ● debounce ：同樣 function 連續觸發時只執行一次 ● throttle ：同樣 function 連續觸發時降低執行頻率
- 18. 18 以往的 autocomplete 分享 ● debounce ：同樣 function 連續觸發時只執行一次 ● throttle ：同樣 function 連續觸發時降低執行頻率 ● Live DEMO
- 19. 19 以往的 autocomplete 分享 ● debounce ：同樣 function 連續觸發時只執行一次 ● throttle ：同樣 function 連續觸發時降低執行頻率 ● Live DEMO 後端內容好少 ...
- 20. 20 本次分享以後端為主
- 27. 27 最直覺的開發方式
- 28. 28 直接使用 RDBMS
- 29. 29 直接使用 RDBMS
- 30. 30 直接使用 RDBMS 使用 LIKE 比對資料庫內容
- 31. 31 直接使用 RDBMS 使用 LIKE 比對資料庫內容 依照字典升序排序取出前 10 個
- 32. 32 問題點
- 33. 33 問題點 ● 資料量大時，需要對 name 建立 index
- 34. 34 問題點 ● 資料量大時，需要對 name 建立 index ● 並非一定會使用 index ，需視 query plan 而定
- 35. 35 改用 Redis 試試
- 36. 36 Redis
- 42. 42 先介紹 Sorted Set ● Redis 的一種資料型態
- 43. 43 先介紹 Sorted Set ● Redis 的一種資料型態 ● 使用分數 (score) 做為排序的順序
- 44. 44 先介紹 Sorted Set ● Redis 的一種資料型態 ● 使用分數 (score) 做為排序的順序 ● 若分數相同，則使用字典排序做為順序
- 45. 45 索引階段 - 正規化文字 ( 以 Taïwan 為例 )
- 46. 46 索引階段 - 正規化文字 ( 以 Taïwan 為例 )
- 47. 47 索引階段 - 正規化文字 ( 以 Taïwan 為例 ) 1. 先標準化拆解
- 48. 48 索引階段 - 正規化文字 ( 以 Taïwan 為例 ) 1. 先標準化拆解 2. 再移除附加符號
- 49. 49 索引階段 - 正規化文字 ( 以 Taïwan 為例 ) 1. 先標準化拆解 2. 再移除附加符號 3. 最後全部轉為小寫
- 50. 50 索引階段 - 使用 ZADD 儲存
- 51. 51 索引階段 - 使用 ZADD 儲存 t ta tai taip taipe taipei taipei*
- 52. 52 索引階段 - 使用 ZADD 儲存 表示為完整的 candidate t ta tai taip taipe taipei taipei*
- 53. 53 索引階段 - 使用 ZADD 儲存 t ta tai taip taipe taipei taipei* 表示為完整的 candidate ZADD 儲存到 Redis t ta tai taip taipe taipei taipei*
- 54. 54 索引階段 - 使用 ZADD 儲存 t ta tai taip taipe taipei taipei* 表示為完整的 candidate ZADD 儲存到 Redis t ta tai taip taipe taipei taipei* t ta tai taiw taiwa taiwan taiwan*
- 55. 55 索引階段 - 使用 ZADD 儲存 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* 表示為完整的 candidate ZADD 儲存到 Redis t ta tai taip taipe taipei taipei* t ta tai taiw taiwa taiwan taiwan* ZADD 儲存到 Redis
- 56. 56 索引階段 - 使用 ZADD 儲存
- 57. 57 索引階段 - 使用 ZADD 儲存
- 58. 58 索引階段 - 使用 ZADD 儲存 score
- 59. 59 索引階段 - 使用 ZADD 儲存 score candidate
- 60. 60 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋
- 61. 61 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 ta
- 62. 62 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 使用者輸入 ta
- 63. 63 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 ta 使用者輸入 ta
- 64. 64 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 ZRANK 定位 ta 使用者輸入 ta
- 65. 65 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta 使用者輸入 ta
- 66. 66 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta 回傳 使用者輸入 ta
- 67. 67 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta 回傳 2 使用者輸入 ta
- 68. 68 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta ZRANGE 取得 2 後面 n 個 回傳 2 使用者輸入 ta
- 69. 69 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta ZRANGE 取得 2 後面 n 個 回傳 2 回傳 使用者輸入 ta
- 70. 70 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta ZRANGE 取得 2 後面 n 個 回傳 2 回傳 ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* 使用者輸入 ta
- 71. 71 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta ZRANGE 取得 2 後面 n 個 回傳 2 回傳 ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* 整理後回傳使用者 使用者輸入 ta
- 72. 72 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 t ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* ZRANK 定位 ta ZRANGE 取得 2 後面 n 個 回傳 2 回傳 ta tai taip taipe taipei taipei* taiw taiwa taiwan taiwan* 整理後回傳使用者 taipei taiwan 使用者輸入 ta
- 73. 73 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋
- 74. 74 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋
- 75. 75 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 先定位
- 76. 76 搜尋階段 - 使用 ZRANK 及 ZRANGE 搜尋 先定位 再取出部分資料
- 77. 77 優缺點
- 78. 78 優缺點 維運方便
- 80. 80 優缺點 維運方便 資料全部儲存於記憶體，速度快 需人工介入的部分較多
- 81. 81 優缺點 維運方便 資料全部儲存於記憶體，速度快 需人工介入的部分較多 資料全部儲存於記憶體，成本高
- 83. 83 Elasticsearch
- 86. 86 先介紹 Edge n-gram tokenizer
- 87. 87 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器
- 88. 88 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元
- 89. 89 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例
- 90. 90 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t
- 91. 91 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta
- 92. 92 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai
- 93. 93 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai – taip
- 94. 94 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai – taip – taipe
- 95. 95 先介紹 Edge n-gram tokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai – taip – taipe – taipei
- 100. 100 前置設定 - Mappings
- 101. 101 前置設定 - Mappings 搜尋時使用 keyword analyzer ，避免切詞
- 102. 102 索引階段
- 103. 103 索引階段
- 104. 104 索引階段 會利用 edge n-gram 切詞後寫入索引
- 105. 105 搜尋階段
- 106. 106 搜尋階段
- 107. 107 搜尋階段 搜尋時利用 keyword analyzer 不切詞搜尋
- 109. 109 Elasticsearch 的 filtercontext ● Elasticsearch 搜尋時會依照計算出來的分數排序
- 110. 110 Elasticsearch 的 filtercontext ● Elasticsearch 搜尋時會依照計算出來的分數排序 ● filter 不計算分數
- 111. 111 Elasticsearch 的 filtercontext ● Elasticsearch 搜尋時會依照計算出來的分數排序 ● filter 不計算分數 ● 經常使用相同的 filter 會被 cache ，加快搜尋速度
- 112. 112 優缺點
- 113. 113 優缺點 內建機制即可達成
- 115. 115 優缺點 內建機制即可達成 資料全部儲存於硬碟，成本低 維運成本高
- 116. 116 各種使用情境
- 117. 117 文字包括 metadata
- 118. 118 文字包括 metadata - Redis
- 119. 119 文字包括 metadata - Redis t ta tai taip taipe taipei taipei*123456 taiw taiwa taiwan taiwan*556677
- 120. 120 文字包括 metadata - Redis t ta tai taip taipe taipei taipei*123456 taiw taiwa taiwan taiwan*556677
- 121. 121 文字包括 metadata - Elasticsearch
- 122. 122 文字包括 metadata - Elasticsearch
- 123. 123 依照使用頻率排序
- 124. 124 依照使用頻率排序 - Redis
- 125. 125 依照使用頻率排序 - Redis
- 126. 126 依照使用頻率排序 - Redis index name
- 127. 127 依照使用頻率排序 - Redis index name score
- 128. 128 依照使用頻率排序 - Redis index name score candidate
- 129. 129 依照使用頻率排序 - Redis
- 130. 130 依照使用頻率排序 - Redis
- 133. 133 依照使用頻率排序 - Redis 依照分數 降冪排序 總共取前 50 筆
- 138. 138 依照使用頻率排序 - Elasticsearch 加上 sort 即可
- 139. 139 Live DEMO
- 140. 140 Conclusion
- 141. 141 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 維運成本 ( 便宜→貴 ) 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 142. 142 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 維運成本 ( 便宜→貴 ) 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 143. 143 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 144. 144 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 1 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 145. 145 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 146. 146 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 擴充性 ( 易→難 )
- 147. 147 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 4 2 3 擴充性 ( 易→難 )
- 148. 148 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 4 2 3 擴充性 ( 易→難 ) 1
- 149. 149 Conclusion 項目 client RDBMS Redis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 4 2 3 擴充性 ( 易→難 ) 4 1 3 2
- 150. 150 Conclusion
- 153. 153 Conclusion ● 沒錢的時候用 Redis ● 有維運技術用 Elasticsearch ● 複雜排序用 Elasticsearch
- 154. 154 One more thing
- 156. 156
- 157. 157 References ● Practical Autocomplete ● Auto Complete with Redis ● Edge n-gram tokenizer ● Debounce ThrottleTest
- 158. 158