dx-text-area中#开头特殊词全局自动补全功能实现求助

你之前的实现仅能触发第一个#开头词的补全，原因是dxAutocomplete默认会匹配整个输入文本的开头，当文本中已有内容后输入#，整个字符串的开头并非#，因此不会触发补全逻辑。

解决方案 #

通过监听dxTextArea的输入事件，实时提取光标位置前最近的#开头片段，将其作为dxAutocomplete的搜索关键词，同时控制补全菜单的显示/隐藏，选中项后替换对应文本片段。

组件类代码 #

import { Component, ViewChild } from '@angular/core';
import { DxTextAreaComponent, DxAutocompleteComponent } from 'devextreme-angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('textArea') textArea!: DxTextAreaComponent;
  @ViewChild('autocomplete') autocomplete!: DxAutocompleteComponent;
  
  // 补全数据源
  tagDataSource = ['#111','#222', '#444'];
  // 当前用于搜索的#开头片段
  currentTagSearch = '';
  message = '';

  // 监听文本框输入事件
  handleTextInput(e: any) {
    const currentText = e.component.option('value');
    const caretPosition = e.component.getCaretPosition();
    const textBeforeCaret = currentText.substring(0, caretPosition);
    const lastHashIndex = textBeforeCaret.lastIndexOf('#');

    if (lastHashIndex !== -1) {
      // 提取最后一个#到光标位置的内容作为搜索词
      this.currentTagSearch = textBeforeCaret.substring(lastHashIndex);
      // 打开补全菜单
      this.autocomplete.instance.open();
    } else {
      this.currentTagSearch = '';
      // 无#时关闭菜单
      this.autocomplete.instance.close();
    }
  }

  // 处理补全项选中事件
  handleTagSelect(e: any) {
    const selectedTag = e.itemData;
    const currentText = this.textArea.instance.option('value');
    const caretPosition = this.textArea.instance.getCaretPosition();
    const textBeforeCaret = currentText.substring(0, caretPosition);
    const lastHashIndex = textBeforeCaret.lastIndexOf('#');

    if (lastHashIndex !== -1) {
      // 替换#开头的片段为选中的标签
      const updatedText = currentText.substring(0, lastHashIndex) + selectedTag + currentText.substring(caretPosition);
      this.textArea.instance.option('value', updatedText);
      // 将光标移动到标签末尾
      this.textArea.instance.setCaretPosition(lastHashIndex + selectedTag.length);
    }
    this.autocomplete.instance.close();
  }
}

模板代码 #

<dxi-item dataField="message">
  <div *dxTemplate>
    <!-- 文本输入框 -->
    <dx-text-area 
      #textArea
      [(value)]="message"
      (onInput)="handleTextInput($event)"
      placeholder="输入消息，#开头的词可触发补全">
    </dx-text-area>
    <!-- 自动补全组件 -->
    <dx-autocomplete
      #autocomplete
      [dataSource]="tagDataSource"
      [searchValue]="currentTagSearch"
      (onItemClick)="handleTagSelect($event)"
      [minSearchLength]="1"
      [width]="'100%'">
    </dx-autocomplete>
  </div>
  <dxo-label text="Message"></dxo-label>
</dxi-item>

关键说明 #

1. 提取目标片段：通过lastIndexOf('#')定位光标前最近的#，截取该位置到光标处的文本作为搜索关键词，确保每个#开头的片段都能触发补全。
2. 菜单控制：检测到#时打开补全菜单，无#时自动关闭，提升交互体验。
3. 文本替换与光标调整：选中补全项后，替换对应的#开头片段，并将光标移动到标签末尾，保证输入流畅性。

内容的提问来源于stack exchange，提问作者E. Zahra