背景

站内搜索是一个网站的基本功能，一个好的搜索提示也能很好的提升用户体验，提高用户找到自己需要的东西的效率

需求

用户输入的时候自动提示，无论输入汉字，拼音，字母都有提示出来

下图是优酷站内搜索的时候弹出的提示

步骤

环境

1. 安装elasticsearch 6.1.3
2. java1.8

创建索引

PUT localhost:9200/vindex

{
	"settings":{
		"number_of_shards":3,
		"number_of_replicas":0
	},
	"mappings":{
		"film":{
			"properties":{
				"title":{
					"type":"text",
					"analyzer":"ik_max_word"
				},
				"title_cn":{
					"type":"completion"
				},
				"title_qpy":{
					"type":"completion"
				},
				"title_spy":{
					"type":"completion"
				}
			}
		}
	}
}

用脚本插入数据

<?php
include "vendor/autoload.php";

$pinyin = new \Overtrue\Pinyin\Pinyin();

$films = array(
	\'摔跤吧！爸爸\',
	\'请以你的名字呼唤我\',
	\'看不见的客人\',
	\'海边的曼彻斯特\',
	\'银翼杀手2049\',
	\'至暗时刻 \',
	\'杰出公民\',
	\'天才枪手\',
	\'天空之眼\',
	\'天才捕手\',
	\'天才少女\',
	\'The Shape of Water\',
	\'Three Billboards Outside Ebbing, Missouri\',
);

foreach($films as $film){
	    $params = array(
        \'index\'=>\'vindex\',
        \'type\'=>\'film\',
        \'body\'=>array(
            \'title\'=>$film,
            \'title_cn\'=>$film,
            \'title_spy\'=> $pinyin->abbr($film),
            \'title_qpy\'=>str_replace(\' \',\'\',$pinyin->sentence($film))
        )
    );

    try {
        $client = \Elasticsearch\ClientBuilder::create()->setHosts(array("localhost:9200"))->build();
        $client->index($params);
    }catch (\Exception $e){
        print_r($e);
    }
}

运行 php create_index.php

后端用search.php

<?php
include "vendor/autoload.php";

$client = \Elasticsearch\ClientBuilder::create()->setHosts(array("localhost:9200"))->build();

$keyword = $_GET[\'term\'];
//$keyword = \'t\';
$params = array(
    \'index\'=>\'vindex\',
    \'type\'=>\'film\',
    \'body\'=>
        array(
            \'suggest\'=>
            array(
                \'title_spy_suggest\'=>array(
        	        \'prefix\'=>$keyword,
        	        \'completion\'=>array(\'field\'=>\'title_spy\',\'skip_duplicates\'=>true,\'size\'=>5),
                ),
                \'title_qpy_suggest\'=>array(
                    \'prefix\'=>$keyword,
                    \'completion\'=>array(\'field\'=>\'title_qpy\',\'skip_duplicates\'=>true,\'size\'=>5),
                ),
                \'title_cn_suggest\'=>array(
                    \'prefix\'=>$keyword,
                    \'completion\'=>array(\'field\'=>\'title_cn\',\'skip_duplicates\'=>true,\'size\'=>5),
                ),
            ),
        ),
);

$res = $client->search($params);

$search_result = array();

foreach($res[\'suggest\'][\'title_cn_suggest\'][0][\'options\'] as $key=>$value){
        array_push($search_result , $value[\'_source\'][\'title\']);
}

foreach($res[\'suggest\'][\'title_spy_suggest\'][0][\'options\'] as $key=>$value){
    array_push($search_result , $value[\'_source\'][\'title\']);
}

foreach($res[\'suggest\'][\'title_qpy_suggest\'][0][\'options\'] as $key=>$value){
    array_push($search_result , $value[\'_source\'][\'title\']);
}

echo json_encode(array_values(array_unique($search_result)));

前端的话直接用jQuery UI里面的autocomplete组件

效果如下