• <nav id="dstbx"></nav>

    <nav id="dstbx"></nav>
    1. <form id="dstbx"></form>
    2. <small id="dstbx"></small>

      教育行業A股IPO第一股(股票代碼 003032)

      全國咨詢/投訴熱線:400-618-4000

      搜索框文字自動補全功能怎樣實現?

      更新時間:2021年11月03日16時53分 來源:傳智教育 瀏覽次數:

      好口碑IT培訓

      我們在網頁上搜索內容時,常常會看到搜索框跳出與你輸入的文字內容相關的搜索項,這個功能是怎么實現的呢?

      需求說明:
      當用戶在搜索框輸入字符時,我們應該提示出與該字符有關的搜索項,如圖:

      黑馬旅游搜索框

      使用拼音分詞

      要實現根據字母做補全,就必須對文檔按照拼音分詞。在GitHub上恰好有elasticsearch的拼音分詞插件。地址:https://github.com/medcl/elasticsearch-analysis-pinyin

      安裝方式與IK分詞器一樣,分三步:

      ①解壓

      ②上傳到虛擬機中,elasticsearch的plugin目錄

      ③重啟elasticsearch

      ④測試

      自定義分詞器

      elasticsearch中分詞器(analyzer)的組成包含三部分:

      character filters:在tokenizer之前對文本進行處理。例如刪除字符、替換字符。

      tokenizer:將文本按照一定的規則切割成詞條(term)。例如keyword,就是不分詞;還有ik_smart。

      tokenizer filter:將tokenizer輸出的詞條做進一步處理。例如大小寫轉換、同義詞處理、拼音處理等。
      假設四級考試通過的心情,通過自定義分詞器處理,大概是下面的展現形式:

      自定義分詞器

      我們可以在創建索引庫時,通過settings來配置自定義的analyzer(分詞器),創建代碼如下:

      PUT /test
      {
        "settings": {
          "analysis": {
            "analyzer": { // 自定義分詞器
              "my_analyzer": {  // 分詞器名稱
                "tokenizer": "ik_max_word",
                "filter": "pinyin"
              }
            }
           }
        }
      }
      PUT /test
      {
        "settings": {
          "analysis": {
            "analyzer": { // 自定義分詞器
              "my_analyzer": {  // 分詞器名稱
                "tokenizer": "ik_max_word",
                "filter": "py"
              }
            },
            "filter": { // 自定義tokenizer filter
              "py": { // 過濾器名稱
                "type": "pinyin", // 過濾器類型,這里是pinyin
          "keep_full_pinyin": false,
                "keep_joined_full_pinyin": true,
                "keep_original": true,
                "limit_first_letter_length": 16,
                "remove_duplicated_term": true,
                "none_chinese_pinyin_tokenize": false
              }
            }
          }
        }
      }

      拼音分詞器適合在創建倒排索引的時候使用,但不能在搜索的時候使用。

      創建倒排索引時:

      自定義分詞器

      因此字段在創建倒排索引時應該用my_analyzer分詞器;字段在搜索時應該使用ik_smart分詞器;

      PUT /test
      {
        "settings": {
          "analysis": {
            "analyzer": {
              "my_analyzer": {
                "tokenizer": "ik_max_word", "filter": "py"
              }
            },
            "filter": {
              "py": { ... }
            }
          }
        },
        "mappings": {
          "properties": {
            "name": {
              "type": "text",
              "analyzer": "my_analyzer",
              "search_analyzer": "ik_smart"
            }
          }
        }
      }


      completion suggester查詢
      elasticsearch提供了Completion Suggester查詢來實現自動補全功能。這個查詢會匹配以用戶輸入內容開頭的詞條并返回。為了提高補全查詢的效率,對于文檔中字段的類型有一些約束:

      參與補全查詢的字段必須是completion類型。

      字段的內容一般是用來補全的多個詞條形成的數組。completion suggester查詢

      // 創建索引庫
      PUT test
      {
        "mappings": {
          "properties": {
            "title":{
              "type": "completion"
            }
          }
        }
      }
      // 示例數據
      POST test/_doc
      {
        "title": ["Sony", "WH-1000XM3"]
      }
      POST test/_doc
      {
        "title": ["SK-II", "PITERA"]
      }
      POST test/_doc
      {
        "title": ["Nintendo", "switch"]
      }


      completion suggester查詢
      查詢語法如下:

      // 自動補全查詢
      GET /test/_search
      {
        "suggest": {
          "title_suggest": {
            "text": "s", // 關鍵字
            "completion": {
              "field": "title", // 補全查詢的字段
              "skip_duplicates": true, // 跳過重復的
              "size": 10 // 獲取前10條結果
            }
          }
        }
      }

      注意:自動補全對字段的要求類型是completion類型,字段值是多詞條的數組。

       案例1:實現hotel索引庫的自動補全、拼音搜索功能

      實現思路如下:

      1.修改hotel索引庫結構,設置自定義拼音分詞器

      2.修改索引庫的name、all字段,使用自定義分詞器

      3.索引庫添加一個新字段suggestion,類型為completion類型,使用自定義的分詞器

      4.給HotelDoc類添加suggestion字段,內容包含brand、business

      5.重新導入數據到hotel庫

      注意:name、all是可分詞的,自動補全的brand、business是不可分詞的,要使用不同的分詞器組合

      RestAPI實現自動補全

      先看請求參數構造的API:

      自動補全

      再來看解析:


       案例2:實現酒店搜索頁面輸入框的自動補全

      查看前端頁面,可以發現當我們在輸入框鍵入時,前端會發起ajax請求:

      自動補全

      在服務端編寫接口,接收該請求,返回補全結果的集合,類型為List

      ,在服務端編寫接口,接收該請求,返回補全結果的集合,類型為List

      猜你喜歡:

      IDEA軟件安裝和軟件初始化設置

      怎樣檢驗jdk環境變量配置完成?

      Struts2是什么?有什么優勢?

      Java中有哪些運算符?Java運算符介紹

      傳智java開發培訓

      0 分享到:
      神马影院我不卡