js實(shí)現(xiàn)關(guān)鍵字匹配搜索功能的思路？

比如輸入：b、 be、 bei、 beij、 beiji、 beijin、 beijing 或者縮寫(xiě) bj 或者中文北京

都能匹配到北京

回答

編輯回答

莓森

一個(gè)簡(jiǎn)單的例子，希望能對(duì)你有所幫助！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
</head>
<body>
    <script type="text/javascript">
      var data = {
          'beijing': {
              id: 100190,
              cn_name: "北京",
              en_name: "beijing"
          }
      }
      var eg_input = "beijin"; //模擬用戶(hù)輸入
      if(data.beijing.en_name.indexOf(eg_input) >= 0 || eg_input === data.beijing.cn_name ) {
          console.log("匹配成功！  -->  " + eg_input);
      } else {
          console.log("匹配失??！  -->  " + eg_input);
      }
    </script>
</body>
</html>

2018年9月5日 06:53

編輯回答

陌璃

你這需求和我3年前寫(xiě)的一個(gè)功能有點(diǎn)像。。下拉框搜索支持模糊搜索和拼音，原理就是切割然后正則匹配，可以參考下，現(xiàn)在可以用select2之類(lèi)的插件了。

2017年2月19日 05:46

編輯回答

爛人

var data = {
    '北京': {
        'id: 10000,
        'pinyin': 'beijing',
        'short': 'bj'
    }
}

搜索時(shí)，先 Object.keys 去遍歷中文；
找不到的話，判斷輸入字符長(zhǎng)度是否大于4（有的城市是四個(gè)字的）
2.1 大于4 就對(duì)所有城市的拼音做 KMP，要提高命中率的話，可以由 data 生成一個(gè)對(duì) pinyin 排序后的 pinyin_list；
2.2 小于5 就對(duì)所有城市的拼音縮寫(xiě)做 KMP，同樣可以做上邊說(shuō)的 list

關(guān)于 list，可以做成這樣：

let list = {
    'b': {
        // 全程和縮寫(xiě)分開(kāi)做list 效率會(huì)好很多 這里只是演示才放在一起
        // list 用 data 來(lái)自動(dòng)化生成 不用自己寫(xiě)
        'beijing': 10000,
        'bj': 10000,
        ...
    }
}

2017年12月14日 08:22