thinkphp5关键字搜索高亮

版权声明： https://blog.csdn.net/qq_27987023/article/details/83120283

实现效果：

---

form表单结构：

<form action="{:url('home/news/news')}" method="get" id="art_search">
    <div class="pull-left news-ltl">
        <span class="pull-left"><strong>分类</strong></span>
        <div class="sel-bor pull-left">
        <select id="news_sort" name="sort">
            <option value="">全部</option>
            {volist name="news_sort" id="vo"}
                <option value="{$vo.id}" {$sort==$vo.id?'selected':''}>{$vo.sort_name}</option>
            {/volist}
        </select>
        </div>
    </div>
    <div class="pull-right news-ltr">
        <input class="pull-left" type="search" name="key_word" id="key_word" value="{$key_word}" placeholder="请输入关键字">
        <button class="pull-right" type="button"><img src="__HOMESTYLE__/images/icon5.png" onclick="key_word_sub()"></button>
    </div>
</form>

点击触发form表单提交：

function key_word_sub(){
    $news_sort = $("#news_sort").val();
    $key_word = $("#key_word").val();
    if($key_word == ''){
        layer.alert('关键字不能为空', {icon: 2,title:'温馨提示'});
        return false;
    }else{
        $("#art_search").submit();
    }
}

tp5接收端数据处理

public function news(){
    $sort = Request::instance()->param('sort');
	$key_word = Request::instance()->param('key_word');

	if(isset($sort) && !empty($sort)){
		$where['lm'] = $sort;
	}

    if(isset($key_word) && !empty($key_word)){
        $where['article_name'] = ['like',"%{$key_word}%"];
    }

	$news_sort = Db::name("article_sort")->where("pass","yes")->order("sort_px asc")->select();

	$news_list = Db::name("article")->where($where)->order("px desc,create_time desc")->paginate(6);
    $page = $news_list->render();
    
    if(isset($key_word) && !empty($key_word)){
        $list_to_array = $news_list->toArray();
        $news_list = $list_to_array['data'];
        foreach($news_list as $key=>$item){
            //关键字高亮替换
            $news_list[$key]['article_name'] = preg_replace("/($key_word)/i","<b style='color:#e2a371'>{$key_word}</b>",$item['article_name']);
        }
    }

    $this->assign("key_word",$key_word);
	$this->assign("page",$page);
	$this->assign("news_list",$news_list);
	$this->assign("news_sort",$news_sort);
	$this->assign("sort",$sort);
    return $this->fetch('news');
}

前台列表输出：

<div class="news-lb">
    {volist name="news_list" id="vo"}
        <div class="list">
            <a href="{:url('home/news/news_show',['art_id'=>$vo.id])}">
                <div class="list-i pull-left">
                {if condition="$vo.art_img != ''"}
                    <img src="/uploads/article/{$vo.art_img}" style="width: 100%">
                {else /}
                    <img src="__HOMESTYLE__/images/noimg.jpg" alt="" style="width: 100%;height:100%">
                {/if}
                </div>
                <div class="list-sp pull-right">
                    <h4>{$vo.article_name}</h4>
                    <h6>{$vo.article_desc}</h6>
                    <h5><span><img src="__HOMESTYLE__/images/icon29.png">{$vo.create_time|date="Y-m-d",###}</span> <span><img src="__HOMESTYLE__/images/icon30.png">{$vo.read_num}</span></h5>
                </div>
            </a>
        </div>
    {/volist}
    <!--翻页-->
    <div class="page-box text-right">
        <nav aria-label="Page navigation">
            {$page}
        </nav>
    </div>
</div>