ng-bootstrap угловой фильтр json объект для typeahead - PullRequest
Новая
       6

ng-bootstrap угловой фильтр json объект для typeahead

0 голосов
/ 26 мая 2018

Привет, я пытаюсь сделать typehahead для угловых с ng-bootstrap.Я создал службу для получения данных JSON из службы. 

import { Search } from './search';
export const SEARCH: Search[] = [
    {
        id:1,
        searchitem: 'jeans',
        url: 'https://www.google.co.in',
    },
    {
        id:2,
        searchitem: 'Shirts',
        url: 'https://www.facebook.com',
    }
];

Итак, мой тег ввода HTML выглядит следующим образом - 

<input type="search" placeholder="Search" aria-label="Search" 
[(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
[inputFormatter]="formatter">

Код для моего заголовка выглядит следующим образом -

export class NgbdTypeaheadTemplate {
public model: any;
searchList: Search[];
constructor(private searchservice: SearchService) { }

ngOnInit() {
  this.searchList = this.searchservice.getSearch();
}

search = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(200),
    withLatestFrom(this.searchList),
    map(([term, list]) => term === '' ? []
      : list.filter((v:any) => list.filter(v => v.searchitem.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))) 

    );
 }

и созданный мною сервис выглядит следующим образом - 

import { Injectable } from '@angular/core';
import { Search } from '../data/search';
import { SEARCH } from '../data/searchdata';

@Injectable()
export class SearchService {

  constructor() { }

  getSearch(): Search[]{
    return SEARCH;
  }
}

Я хочу показать searchitem объект в автозаполнении, когда пользователь начинает печатать, но я получаюошибка при list.filter как error TS2339: Property 'filter' does not exist on type 'Search' Пожалуйста, помогите

Обновление - Итак, у меня есть эта форма - 

<form class="form-inline my-2 my-lg-0">
  <ng-template #rt let-r="result" let-t="term">
    {{ r.searchitem}}
  </ng-template>
  <input 
    type="search" 
    class="form-control mr-sm-2" 
    #instance="ngbTypeahead"
    placeholder="Search" 
    aria-label="Search" 
    [(ngModel)]="model" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt"
    [inputFormatter]="formatter"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
    >
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

При нажатии элемента поиска я хочу изменить URL, чтобы я мог показать, чтостр.

Например.Если я нажму на джинсы и нажму кнопку search, я смогу перенаправить на https://www.google.co.in указанный URL

1 Ответ

0 голосов
/ 26 мая 2018

У меня есть одно решение для этого же.

Вы также можете использовать ng-шаблон для настраиваемого шаблона для отображения результатов и использовать объект в качестве модели.

Я создал демонстрацию на stackblitz .Я надеюсь, что это поможет / руководство для вас / других.

html code 

<ng-template #rt let-r="result" let-t="term">
   {{ r.searchitem}}
</ng-template>
<input 
    type="search" 
    #instance="ngbTypeahead"
    placeholder="Search" 
    aria-label="Search" 
    [(ngModel)]="model" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt"
    [inputFormatter]="formatter"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="searchUrl(model.url)">Search</button>

ts file code 

features = [{
        id: 1,
        searchitem: 'jeans',
        url: 'https://www.google.co.in',
    },
    {
        id: 2,
        searchitem: 'Shirts',
        url: 'https://www.facebook.com',
    }
]




public model: any;



search = (text$: Observable < string > ) =>
    text$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        merge(this.focus$),
        merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
        map(term => (term === '' ? this.features :
            this.features.filter(v => v.searchitem.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );

formatter = (x: {
    searchitem: string
}) => x.searchitem;

searchUrl(url) {
    if (url) {
        window.open(url, '_blank');
    }
}
...