YII2.0搭建的后台系统内部的@功能实现

下载并引入atwho的js和css，$userUrl为列表查查询方法。

$this->registerCssFile('/css/jquery.atwho.css');
$this->registerJsFile('/js/jquery.caret.js');
$this->registerJsFile('/js/jquery.atwho.js');
$userUrl = Url::to (['user/select2']);

设定文本域

<?= $form->field($model, 'receivables_remark')->textarea(['rows' => 6,'placeholder'=>'@XXX可提醒对应责任人']) ?>

js实现输入@符号弹出名单下拉列表

$JS=<<<JS
 var usersArr = [];
 // 异步获取名单列表
 $.ajaxSettings.async = false;
 $.getJSON('{$userUrl}',function(data) {
     if (data){
         usersArr = getParamValues('text', data['results']);
     } 
 })
 $('#financialauditform-receivables_remark').atwho({
   at: "@",
   data: usersArr,
   limit: 200,
 });
 $('#hudcustomerdetail-receivables_remark').atwho({
   at: "@",
   data: usersArr,
   limit: 200,
 });
 // 处理获取到的名单列表的格式
 function getParamValues(name, arr) {
     var ret = []
     for (var i = 0, len = arr.length; i < len; i++) {
         ret.push(arr[i][name])
     }
     return ret
 }
JS;
$this->registerJs($JS);