Question

我正尝试创建一个“搜索下一个”功能，在用户按下Enter键后，将调用一个专注于下一个匹配项的功能。棘手的部分是要搜索的文本是一个带有嵌套元素的div容器，所有元素都带有各自的文本。我无法使用管道创建突出显示内容，但不确定如何导航到与搜索字词匹配的下一个文本。有什么想法吗？

以下是突出显示的管道：

@Pipe({
    name: 'highlight'
  })
export class HighlightPipe implements PipeTransform {

transform(value: string, args: string): any {
  if (args && value) {
      value = String(value); // make sure its a string;
      const startIndex = value.toLowerCase().indexOf(args.toLowerCase());
      if (startIndex != -1) {
        console.log(startIndex);
        const endLength = args.length;
        const matchingString = value.substr(startIndex, endLength);
        return value.replace(matchingString, "<mark>" + matchingString + "</mark>");
      }

  }
  return value;
}

}

带有包含所有文本的搜索输入和div容器的模板：

<section *ngFor="let section of country.Section">
  <div class="main" [innerHTML]="section.Name | highlight: searchTerm"></div>
     <div *ngFor="let sectionParagraph of section.SectionParagraph">
       <p class="paragraph" [innerHTML]="sectionParagraph.ParagraphText | highlight: searchTerm"></p>
       <p class="paragraph" [innerHTML]="sectionParagraph.ChildParagraphs | highlight: searchTerm"></p>
     </div>
     <div *ngFor="let subsection of section.SubSection">
       <div class="secondary" [innerHTML]="subsection.Name | highlight: searchTerm"></div>
       <div *ngFor="let subSubsectionParagraph of subsection.SubSectionParagraph">
         <p class="paragraph" [innerHTML]="subSubsectionParagraph.ParagraphText | highlight: searchTerm"></p>
         <div *ngFor="let childParagraph of subSubsectionParagraph.ChildParagraphs">
           <p class="paragraph" [innerHTML]="childParagraph.ParagraphText | highlight: searchTerm"></p>
         </div>
       </div>
     </div>
  <hr>
</section>

在同一模板上输入搜索内容：

    <mat-form-field class="example-full-width" style="margin-left: 120px">
        <input matInput placeholder="Search Text" [value]="searchTerm" [(ngModel)]="searchTerm" (input)="highlight($event)" (keyup.enter)="nextTerm()">
    </mat-form-field>

编辑：我想避免使用任何jQuery作为解决方案

Answer 1

这个想法是使用带有两个参数“搜索”和“索引”的管道，然后您需要更改管道以考虑此更改

li

然后您像用

制作管道一样，但重要的是如何传递两个参数

setInterval(function(){
    $('.editor' ).find('li').each(function(){
    if ($(this).html().indexOf('span')==-1){
            $(this).html('<span>' + $(this).html() + '</span>');
    }
  });
}, 200);

click（）函数类似于：

transform(value: string, args: string,index:number=-1): any {
  if (args && value) {
      value = String(value); // make sure its a string;
      const startIndex = value.toLowerCase().indexOf(args.toLowerCase(),index);
      if (startIndex != -1) {
        console.log(startIndex);
        const endLength = args.length;
        const matchingString = value.substr(startIndex, endLength);
        return value.substring(0,startIndex)+"<mark>" + matchingString + "</mark>"+value.substring(startIndex+endLength);
      }

  }
  return value;
}

您可以在stackblitz

中作为示例

更新如果我们有一系列文本，则可以使我们的文本成为带有索引的对象

<p (click)="click()" class="paragraph" 
     [innerHTML]="text | highlight: search:index"></p>

然后，我们的管道可以考虑“索引”

//This are the variables I used in a more simple example

index:number=0;
text='Hola mundo, Hola Mundo';
search="Hola";

click()
  {
    let index=this.text.indexOf(this.search,this.index+1);
    this.index=index>0?index:0;
  }

嗯，“点击”功能要复杂一些

sections = [
    { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', index: 0 },
    { text: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', index: 1 },
    { text: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', index: 2 },
    { text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. ', index: 3 }
  ]

在您的情况下，您需要计算该节和小节的“索引”以使其连续。

new stackblitz

如何从搜索输入中搜索“下一个”术语

1 个答案: