小程序es高亮搜索

小程序es搜索高亮显示

小程序列表搜索框

 <form catchsubmit="formSubmit" catchreset="formReset">
      <input class="weui-input" name="title" placeholder="这是一个输入框" />
        <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
    </form>

小程序前台页面循环展示的时候需要注意的是我们进行高亮的那个字段需要运用富文本标签进行解析样式
示例代码如下：

 <block wx:for="{{str}}" wx:key='key'>
    <view>
      <rich-text nodes="{{item.title}}"></rich-text>
      <text>{{item.content}}</text>
    </view>
  </block>

小程序页面js

 //高亮搜索
  formSubmit(e) {
    var _this = this;
    //console.log(e.detail.value.title)
    var title = e.detail.value.title;
    wx.request({
      url: 'http://day531.week2.com/serch',
      data:{
        title:title
      },
      success:function(add){
        console.log(add.data.data)
        var str = add.data.data;
        _this.setData({str})
      }
    })
  },

后天创建索引，然后指定ik分词器的配置

  public function suoyin2()
    {
        $client = ClientBuilder::create()->setHosts(['127.0.0.1:9200'])->build();
        $params = [
            'index' => 'qxw',
            'body' => [
                      'settings'=>[
                          'number_of_shards'=>5, //分片数量（后期不可更改）
                          'number_of_replicas'=>1 //副本数量（后期可更改）
                      ],
                        'mappings'=>[
//                          'table'=>[
//                              'enabled'=>true //php版本7.0之后表名默认为‘_doc’,表名可以不加
//                        ],
                    //加载ik分词器的字段
                    'properties' => [
                        'title' => [
                            'type' => 'text',
                            'analyzer' => 'ik_max_word',
                            'search_analyzer' => 'ik_max_word'
                        ],
                        'content' => [
                            'type' => 'text',
                            'analyzer' => 'ik_max_word',
                            'search_analyzer' => 'ik_max_word'
                        ],
                    ]
                ],
            ]
        ];
        $response = $client->indices()->create($params);
    }

当mysql数据表添加成功后之后将添加的数据同步到es中

  public function save(Request $request)
    {
        //接收数据
        $param=$request->param();
        if ($param == ''){
            return json(['code'=>500,'data'=>'','msg'=>'酒店信息必填']);
        }
            //添加
            $obj=new \app\week1\model\Jiudian();
            $res=$obj->allowField(true)->save($param);
            //当数据表添加成功后，然后我们调用我们封装的方法，往es面添加数据，进行一个数据的同步
            $add=\app\week1\model\Jiudian::order('id','desc')->limit(1)->find()->toArray();
            //print_r($add);die();
            $es=new MyElasticsearch();
            $es->add_doc($add['id'],$add,'wxq','_doc');
            if ($res){
                return json(['code'=>200,'data'=>$res,'msg'=>'添加成功']);
            }else{
                return json(['code'=>500,'data'=>'','msg'=>'添加失败']);
            }
    }

然后后台接收数据进行es搜索

 public function index(Request $request)
    {
        //接收数据
        //接收搜索的标题
        $title=$request->param('title');
            if ($title == ''){
                $data=\app\week1\model\Jiudian::order('price','desc')->select();
                foreach ($data as &$v){
                    $v['image']="http://day524.week1.com/".$v['image'];
                }
                //print_r($v['image']);die();
                return json(['code'=>'0','data'=>$data,'msg'=>'查询成功']);
            }else{
                //从es中查询
                $client = ClientBuilder::create()->setHosts(['127.0.0.1:9200'])->build();
                $params = [
                    'index' => 'wxq',
                    'body' => [
                        'query' => [
                            'multi_match' => [
                                'query' => $title,
                                //查询字段
                                'fields' => ['title']
                            ]
                        ],
                        //高亮显示
                        'highlight' => [
                            "pre_tags" => ["<em class='yx_hl' style='color: red'>",],
                            "post_tags" => [ "</em>"],
                            'fields' => [
                                '*' => new Highlighter()
                            ]
                        ]
                    ]
                ];
                $response = $client->search($params);
                //halt($response);
                //这里需要将我们搜索出来满足条件的数据进行foreach循环，然后将数据进行替换赋值
                foreach ($response['hits']['hits'] as $k=>$v){
                    $response['hits']['hits'][$k]['_source']['title']=$response['hits']['hits'][$k]['highlight']['title'][0];
                }
                //降维
                $data = array_column($response['hits']['hits'], '_source');
                return json(['code' => 0, 'msg' => '查询成功', 'data' => $data]);
            }
    }