php模糊查询候选项高亮展示

html:
<div class="layui-form-item">
    <label class="layui-form-label"><font style="color: red;">*</font> 公司名称</label>
    <div class="layui-input-block" style="width: 450px;">
        <input type="text" id="company_name" name="company_name" required  placeholder="请输入公司名称" autocomplete="off" class="layui-input">
    </div>
    <div style='width:450px;display:none;' id="show_company">
        <ul>

        </ul>
    </div>
</div>

js:

<script>
    // 公司名称联想查询
    $('#company_name').on('keyup', function () {
        var keyword = $('#company_name').val();
        $.post('select-company-name', {'keyword' : keyword} ,function (res) {

            var li = "";
            $.each(res, function (i, v){
                content = v.company_name.replace(keyword,'<span style="color: green">'+ keyword + '</span>');
                li += "<li style='height: 30px;line-height: 30px;'>" + content + "</li>";
            });
            $("#show_company ul").html(li);
            $("#show_company").slideDown('fast');
            $("#show_company ul li").bind('click',function(){
                select_content = $(this).html();//当前选中的 li内容
                $("#company_name").val(filterHTMLTag(select_content));//过滤标签后赋值给 input
                $("#show_company").slideUp('fast');
            });
        });
    });
  

//过滤HTML标签
function filterHTMLTag(str) {
    var msg = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
    msg = msg.replace(/[|]*\n/, ''); //去除行尾空格
    msg = msg.replace(/&nbsp;/ig, ''); //去掉npsp
    return msg;
}

</script>

 

php:

//后端进行模糊查询，具体根据自己业务调整

select * from table where keyword like '%keyword%' ;