玖叶教程网

实现如上效果

代码如下

/static/assets/js/my.js

/* 自定义js文件 */
$(document).ready(function(){
    setTimeout(()=>{
        console.info($("#dr_row_keywords input"))
        $("#dr_row_keywords input:eq(1)").on('input',function(){
            var keywordStr = $(this).val();
            var keywordArr = keywordStr.split(',');
            if(keywordArr.length>0){
                var keyword =  keywordArr[keywordArr.length-1];
                console.info(keyword);

                var module = $("#dr_module").val();
                $.get(dr_get_web_dir()+"index.php?s=api&c=api&m=getkeywords2&title="+keyword+"&module="+module+'&is_ajax=1',
                    function(data) {
                        var res =  JSON.parse(data);
                        var  html = '<div class="schoolo-tag-list" style="width: 400px;' +
                            '  position: absolute;' +
                            '  background: #fff;' +
                            '  z-index: 99;' +
                            '  border: 1px solid #E4E6EF;' +
                            '  border-radius: 4px;">';
                        if(res.code  == 0){
                            var lists = res['data'];
                            for (i  in lists) {
                                console.info(lists[i])
                                html += '<div class="item">'+lists[i]+'</div>';
                            }
                            if(lists.length == 0){
                                html += '<p>没搜索到！</p>';
                            }
                        }
                        html += '</div>';
                        $("#dr_row_keywords .schoolo-tag-list").remove();
                        $("#dr_row_keywords .col-md-10").append(html);
                    }
                );
            }
        })
        //选择

        $("#dr_row_keywords").on('click', '.schoolo-tag-list .item',function(){
              var val = $(this).text();
            $("#dr_row_keywords input:eq(1)").val(val)
            $("#dr_row_keywords input:eq(1)").blur();
              console.info(val);
        })
    },0)
})

static/assets/global/css/admin.min.css   最后

/*新增*/
.schoolo-tag-list{display: flex;flex-wrap: wrap;padding: 15px 15px 0;box-sizing:border-box;max-height: 150px;overflow-y: auto}
.schoolo-tag-list p{padding-bottom: 15px;text-align: center;width: 100%}
.schoolo-tag-list .item{height: 30px;padding:0 15px;display: flex;align-items: center;background: #eee;margin-right: 15px;margin-bottom: 15px;border-radius: 5px;cursor: pointer}
.schoolo-tag-list .item.active{background: #3fa8e1;color: #fff}

dayrui/Fcms/Control/Api/api.php

    /**
     * 提取全部关键字
     */
    public function getkeywords2() {
         $keywords =  dr_safe_replace(\Phpcmf\Service::L('input')->get('title'));
         $module = dr_safe_filename(\Phpcmf\Service::L('input')->get('module'));
         $rt = \Phpcmf\Service::M()->db->query('SELECT keywords FROM  dr_1_news WHERE  keywords  LIKE "%'.$keywords.'%"');
         if ($rt) {
             $arrAll = [];
             $rows = $rt->getResultArray();
             foreach ($rows as $t) {
                if($t['keywords']){
                    $arrSign =  explode(',',$t['keywords']);
                    $arrs = [];
                    foreach ($arrSign as $v) {
                        if(strripos($v,$keywords) !== false){
                            array_push($arrAll,$v);
                        }
                    }
                }
             }
             array_unique($arrAll);
             \dr_exit_msg(0,  '获取成功',array_unique($arrAll));
         }
    }