Downloaded 20 times
Uploaded byMu Chun Wang
深入淺出 autocomplete
该文档介绍了自动完成（autocomplete）技术的基础与实现，涵盖了前端与后端的实现方法，包括使用Redis和Elasticsearch等数据库的优缺点与使用场景。文中详细阐述了如何通过前缀匹配和数据索引技术实现快速响应的自动完成服务。最后，提供了不同存储选项（如RDBMS、Redis和Elasticsearch）的特性比较。
![[CEDEC2017] LINEゲームのセキュリティ診断手法](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2017game1web-170831030226-thumbnail.jpg?width=640&height=640&fit=bounds)
深入淺出 autocomplete
- 1.
- 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.
- 5.
- 6.
- 7. 7 分享的內容 1.一點點的前端 autocomplete LiveDEMO 2.在後端使用 Redis 實作 autocomplete
- 8. 8 分享的內容 1.一點點的前端 autocomplete LiveDEMO 2.在後端使用 Redis 實作 autocomplete 3.在後端使用 Elasticsearch 實作 autocomplete
- 9. 9 分享的內容 1.一點點的前端 autocomplete LiveDEMO 2.在後端使用 Redis 實作 autocomplete 3.在後端使用 Elasticsearch 實作 autocomplete 4.各種使用情境
- 10.
- 11.
- 12. 12 什麼是 autocomplete ？ ● 將使用者輸入的文字，使用前綴比對(prefix match) 資料庫，成功回傳對應的待選詞 (candidates)
- 13. 13 什麼是 autocomplete ？ ● 將使用者輸入的文字，使用前綴比對(prefix match) 資料庫，成功回傳對應的待選詞 (candidates) ● 從使用者輸入文字到回傳待選詞的速度要夠快
- 14.
- 15.
- 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.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. 30 直接使用 RDBMS 使用LIKE 比對資料庫內容
- 31. 31 直接使用 RDBMS 使用LIKE 比對資料庫內容 依照字典升序排序取出前 10 個
- 32.
- 33.
- 34. 34 問題點 ● 資料量大時，需要對 name 建立index ● 並非一定會使用 index ，需視 query plan 而定
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 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.
- 78.
- 79.
- 80. 80 優缺點 維運方便 資料全部儲存於記憶體，速度快 需人工介入的部分較多
- 81. 81 優缺點 維運方便 資料全部儲存於記憶體，速度快 需人工介入的部分較多 資料全部儲存於記憶體，成本高
- 82.
- 83.
- 84.
- 85.
- 86. 86 先介紹 Edge n-gramtokenizer
- 87. 87 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器
- 88. 88 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元
- 89. 89 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例
- 90. 90 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t
- 91. 91 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta
- 92. 92 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai
- 93. 93 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai – taip
- 94. 94 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai – taip – taipe
- 95. 95 先介紹 Edge n-gramtokenizer ● Elasticsearch 的其中一種分詞器 ● 可將輸入的單詞固定從頭分割 n 個字元 ● 以 taipei 舉例 – t – ta – tai – taip – taipe – taipei
- 96.
- 97.
- 98.
- 99.
- 100.
- 101. 101 前置設定 - Mappings 搜尋時使用keyword analyzer ，避免切詞
- 102.
- 103.
- 104. 104 索引階段 會利用 edge n-gram切詞後寫入索引
- 105.
- 106.
- 107.
- 108.
- 109. 109 Elasticsearch 的 filtercontext ● Elasticsearch搜尋時會依照計算出來的分數排序
- 110. 110 Elasticsearch 的 filtercontext ● Elasticsearch搜尋時會依照計算出來的分數排序 ● filter 不計算分數
- 111. 111 Elasticsearch 的 filtercontext ● Elasticsearch搜尋時會依照計算出來的分數排序 ● filter 不計算分數 ● 經常使用相同的 filter 會被 cache ，加快搜尋速度
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 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.
- 124.
- 125.
- 126.
- 127. 127 依照使用頻率排序 - Redis indexname score
- 128. 128 依照使用頻率排序 - Redis indexname score candidate
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141. 141 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 維運成本 ( 便宜→貴 ) 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 142. 142 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 維運成本 ( 便宜→貴 ) 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 143. 143 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 144. 144 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 1 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 145. 145 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 擴充性 ( 易→難 )
- 146. 146 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 擴充性 ( 易→難 )
- 147. 147 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 4 2 3 擴充性 ( 易→難 )
- 148. 148 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 4 2 3 擴充性 ( 易→難 ) 1
- 149. 149 Conclusion 項目 client RDBMSRedis Elasticsearch 儲存空間 ( 少→多 ) 1 2 4 3 維運成本 ( 便宜→貴 ) 2 1 3 4 讀取速度 ( 快→慢 ) 1 4 2 3 擴充性 ( 易→難 ) 4 1 3 2
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157. 157 References ● Practical Autocomplete ● Auto Completewith Redis ● Edge n-gram tokenizer ● Debounce ThrottleTest
- 158.