简单实现一个搜索提示

背景

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

需求

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

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

步骤

环境

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组件

效果如下