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

最新推荐文章于 2022-04-18 14:10:22 发布

「已注销」

最新推荐文章于 2022-04-18 14:10:22 发布

阅读量249

点赞数

分类专栏： PHP 前端

本文链接：https://blog.csdn.net/gwz1196281550/article/details/98199404

版权

PHP 同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

前端

21 篇文章 0 订阅

订阅专栏

html:

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;
}