diff --git a/projects/ngx-jsonapi-material/package.json b/projects/ngx-jsonapi-material/package.json
index e17e761..d4eb632 100644
--- a/projects/ngx-jsonapi-material/package.json
+++ b/projects/ngx-jsonapi-material/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-jsonapi-material",
-    "version": "0.22.55",
+    "version": "1.0.0",
     "authors": [
         "Reyesoft"
     ],
diff --git a/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.html b/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.html
index 7dbd62d..353775a 100644
--- a/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.html
+++ b/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.html
@@ -2,9 +2,9 @@
     appearance="outline" floatLabel="never" color="accent"
 >
     <input matInput aria-label="Escribe algo que buscar" name="autocomplete-resource"
-        [placeholder]="toggleResource?.attributes[displayAttributes[0]] || placeholder"
+        [placeholder]="toRelate?.attributes[displayAttributes[0]] || placeholder"
         type="text"
-        [ngClass]="toggleResource?.attributes[displayAttributes[0]] ? 'custom-placeholder' : null"
+        [ngClass]="toRelate?.attributes[displayAttributes[0]] ? 'custom-placeholder' : null"
         [matAutocomplete]="auto"
         [formControl]="autocompleteCtrl"
         (blur)="closeAutocomplete()"
@@ -17,9 +17,9 @@
         (optionSelected)="selectedResource($event.option.value)">
         <div *ngIf="showList">
             <mat-option [value]="null" (click)="clearDisplay()">-- Ninguna --</mat-option>
-            <mat-option [ngClass]="toggleResource?.id === resource.id ? 'mat-selected mat-active' : null"
+            <mat-option [ngClass]="toRelate?.id === resource.id ? 'mat-selected mat-active' : null"
                 [value]="resource"
-                *ngFor="let resource of filtered_resource | async; trackBy: trackByFn"
+                *ngFor="let resource of filteredCollection | async; trackBy: trackByFn"
             >
                 <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
                     <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
@@ -36,7 +36,7 @@
 
     <div fxLayout="row" matSuffix fxLayoutAlign="end center">
         <button mat-icon-button type="button" class="mat-button" matSuffix matTooltip="Limpiar selección"
-            *ngIf="toggleResource?.attributes[displayAttributes[0]] || autocompleteCtrl.value"
+            *ngIf="toRelate?.attributes[displayAttributes[0]] || autocompleteCtrl.value"
             [disabled]="!collection?.loaded"
             (click)="clearDisplay()"
         >
diff --git a/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.ts b/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.ts
index bdd1764..bee737d 100644
--- a/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.ts
+++ b/projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.ts
@@ -1,18 +1,16 @@
 import { Component, OnInit, OnDestroy, Input, ElementRef, ViewChild, EventEmitter, Output, ChangeDetectorRef, TrackByFunction } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { Resource, DocumentCollection, Service, IParamsCollection } from 'ngx-jsonapi';
-import { FormControl, FormGroup } from '@angular/forms';
-import { timeout, filter, tap } from 'rxjs/operators';
+import { Resource } from 'ngx-jsonapi';
+import { timeout } from 'rxjs/operators';
 import { MatAutocompleteTrigger } from '@angular/material';
-import { filterOrRequest } from '../../lib/batch';
 import { Destroyer } from '../../lib/destroyer';
+import { ParentAutocomplete } from '../parent-autocomplete';
 
 @Component({
   selector: 'jam-autocomplete',
   styleUrls: ['./autocomplete.component.scss'],
   templateUrl: 'autocomplete.component.html'
 })
-export class JamAutocompleteComponent implements OnInit, OnDestroy {
+export class JamAutocompleteComponent extends ParentAutocomplete implements OnInit, OnDestroy {
     /**
      * @param  {boolean} previewSelected
      * @usageNotes By default it is `false`.
@@ -20,40 +18,19 @@ export class JamAutocompleteComponent implements OnInit, OnDestroy {
      * shows in the placeholder or matLabel a preview of the selected item.
      */
     @Input() public previewSelected: boolean = false;
-    /**
-     * @param {string} displayText
-     * @usageNotes Text of the selected item.
-     */
-    @Input() public toggleResource: Resource;
-    @Input() public placeholder: string = 'Escribe algo que buscar';
-    @Input() public services: Service;
-    @Input() public displayAttributes: Array<string> = [];
-    @Input() public remoteFilter = {};
-    @Input() public include: Array<string> = [];
-    @Input() public sort: Array<string> = [];
     @Input() public icon: string;
     @Input() public showList: boolean = true;
-    @Output() public toggleResourceChange = new EventEmitter<Resource>();
     @ViewChild(MatAutocompleteTrigger) public autocompleteResource: MatAutocompleteTrigger;
     @ViewChild('autocompleteResource') public autocompleteResourceInput: ElementRef;
 
-    public collection: DocumentCollection;
-    public filtered_resource: Observable<Array<Resource>>;
-    public dataArrived: Subject<string> = new Subject();
-    public myForm: FormGroup;
-    public autocompleteCtrl: FormControl = new FormControl();
-    public resourceArray: Array<Resource> = [];
-    public use_is_loading = true;
     public trackByFn: TrackByFunction<Resource>;
-    public resourceArrayLastFilterValue: string;
-
     private destroyer = new Destroyer();
-    private readonly collectionPerPage = 100; // 500
-    private readonly resource_max_on_list = 50;
 
     public constructor(
         private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    ) {
+        super();
+    }
 
     public ngOnDestroy() {
         this.destroyer.destroy();
@@ -61,18 +38,8 @@ export class JamAutocompleteComponent implements OnInit, OnDestroy {
 
     public ngOnInit(): void {
         this.clearDisplay();
-        this.collection = this.services.newCollection();
-        this.filtered_resource = this.autocompleteCtrl.valueChanges.pipe(
-            this.destroyer.pipe(),
-            filterOrRequest({
-                attribute_to_search: this.displayAttributes[0],
-                resourcesArray: this.resourceArray,
-                getAllFc: this.getAll.bind(this),
-                last_filter_value: this.resourceArrayLastFilterValue,
-                collection: this.collection,
-                page_size: this.collectionPerPage
-            })
-        );
+        this.collection = this.service.newCollection();
+        this.reload();
     }
 
     public closeAutocomplete() {
@@ -92,61 +59,13 @@ export class JamAutocompleteComponent implements OnInit, OnDestroy {
         }
 
         if (this.previewSelected) {
-            this.toggleResource = resource;
+            this.toRelate = resource;
         }
 
-        this.toggleResourceChange.emit(resource);
+        this.toRelateChange.emit(resource);
     }
 
     public displayFn(resource?: Resource): string {
         return ''; // clear input after item selection
     }
-
-    public refresh() {
-        this.services.clearCacheMemory();
-        this.use_is_loading = false;
-    }
-
-    public getAll(search_text: string): Observable<DocumentCollection> {
-        let params: IParamsCollection = {
-            page: {
-                number: 1,
-                size: this.collectionPerPage
-            },
-            remotefilter: this.remoteFilter,
-            include: this.include
-        };
-        if (search_text) {
-            params.remotefilter = { [this.displayAttributes[0]]: search_text };
-        }
-
-        return this.services.all(params).pipe(
-            filter(collection => collection.builded),
-            tap(collection => {
-                this.collection = collection;
-            })
-        );
-    }
-
-    public clearDisplay(): void {
-        this.toggleResource = null;
-        this.autocompleteCtrl.setValue('');
-    }
-
-    private filterResourceByName(value: string | Resource): Array<Resource> {
-        const filterValue = typeof value === 'string' ? value.toLowerCase() : '';
-        let count = 0;
-
-        this.showList = !value && filterValue.length > 0;
-
-        return this.resourceArray.filter((resource: Resource) => {
-            if (
-                count < this.resource_max_on_list &&
-                (resource.attributes[this.displayAttributes[0]].toLowerCase().indexOf(filterValue) === 0 ||
-                    resource.attributes[this.displayAttributes[0]].toLowerCase().indexOf(' ' + filterValue) > 0)
-            ) {
-                return count += 1;
-            }
-        });
-    }
 }
diff --git a/projects/ngx-jsonapi-material/src/lib/parent-autocomplete.ts b/projects/ngx-jsonapi-material/src/lib/parent-autocomplete.ts
new file mode 100644
index 0000000..1097e90
--- /dev/null
+++ b/projects/ngx-jsonapi-material/src/lib/parent-autocomplete.ts
@@ -0,0 +1,81 @@
+import { Resource, Service, DocumentCollection, IParamsCollection } from 'ngx-jsonapi';
+import { Output, EventEmitter, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { filter, tap } from 'rxjs/operators';
+import { FormControl } from '@angular/forms';
+import { filterOrRequest } from './batch';
+
+export class ParentAutocomplete {
+    @Input() public toRelate: Resource;
+    @Input() public remoteFilter: { [key: string]: any };
+    @Input() public placeholder: string;
+    @Input() public service: Service;
+    @Input() public matLabel: string;
+    @Input() public disabled: boolean;
+    @Input() public hasRefresh: boolean = false;
+    @Input() public include: Array<string> = [];
+    @Input() public displayAttributes: Array<string> = [];
+    @Input() public sort: Array<string> = [];
+    @Input() public appareance: 'fill' | 'outline' | 'legacy' | 'standard' = 'outline';
+    @Output() public toRelateChange = new EventEmitter<Resource>();
+
+    public autocompleteCtrl: FormControl = new FormControl();
+    public collection: DocumentCollection;
+    public filteredCollection: Observable<Array<Resource>>;
+    protected collectionArrayLastFilterValue: string;
+    protected collectionArray: Array<Resource> = [];
+    protected readonly collectionPerPage = 100;
+
+    public selectedResource(resource: Resource) {
+        if (!resource) {
+            return;
+        }
+
+        this.toRelate = resource;
+        this.toRelateChange.emit(resource);
+    }
+
+    public refresh() {
+        this.service.clearCacheMemory();
+        this.reload();
+    }
+
+    public clearDisplay(): void {
+        this.toRelate = null;
+        this.autocompleteCtrl.setValue('');
+    }
+
+    protected reload(): void {
+        console.log('😈 entro aca', this.filteredCollection);
+        this.filteredCollection = this.autocompleteCtrl.valueChanges.pipe(
+            filterOrRequest({
+                attribute_to_search: this.displayAttributes[0],
+                resourcesArray: this.collectionArray,
+                getAllFc: this.getAll.bind(this),
+                last_filter_value: this.collectionArrayLastFilterValue,
+                collection: this.collection,
+                page_size: this.collectionPerPage
+            })
+        );
+    }
+
+    private getAll(search_text: string): Observable<DocumentCollection> {
+        let params: IParamsCollection = {
+            page: { number: 1, size: this.collectionPerPage },
+            remotefilter: this.remoteFilter,
+            sort: this.sort,
+            include: this.include
+        };
+
+        if (search_text) {
+            params.remotefilter = { [this.displayAttributes[0]]: search_text };
+        }
+
+        return this.service.all(params).pipe(
+            filter(collection => collection.builded),
+            tap(collection => {
+                this.collection = collection;
+            })
+        );
+    }
+}
diff --git a/projects/ngx-jsonapi-material/src/lib/select/select.component.html b/projects/ngx-jsonapi-material/src/lib/select/select.component.html
index 42601e1..63e8a5e 100644
--- a/projects/ngx-jsonapi-material/src/lib/select/select.component.html
+++ b/projects/ngx-jsonapi-material/src/lib/select/select.component.html
@@ -3,18 +3,18 @@
     [appearance]="appareance"
 >
     <mat-label>
-        {{ label || 'Seleccione una opción' }}
+        {{ matLabel || 'Seleccione una opción' }}
         <i *ngIf="!toRelate">(Ninguna)</i>
     </mat-label>
     <mat-select
         [ngModel]="toRelate"
-        (ngModelChange)="updateRelationships($event)"
+        (ngModelChange)="selectedResource($event)"
         [disabled]="disabled || false"
         [placeholder]="placeholder || 'Seleccione una opción'"
         [multiple]="multiple || false"
         >
 
-        <div class="mat-option-header" *ngIf="adaptiveArray.length >= 10">
+        <div class="mat-option-header">
             <jam-search-input
                 [text]="searchText"
                 [opened]="true"
@@ -24,14 +24,18 @@
 
         <mat-divider></mat-divider>
 
-        <mat-option *ngIf="removeRelationships" [value]="clear_relationships">-- Ninguna --</mat-option>
+        <mat-option *ngIf="removeRelationships"
+            (click)="clearDisplay()"
+        >
+            -- Ninguna --
+        </mat-option>
 
-        <ng-container *ngFor="let resource of adaptiveArray | filter: searchText">
+        <ng-container *ngFor="let resource of filteredCollection | async | filter: searchText">
             <mat-option [value]="resource" *ngIf="parentId && resource.id !== parentId">
-                {{ resource.attributes[displayAttribute] }}
+                {{ resource.attributes[displayAttributes[0]] }}
             </mat-option>
             <mat-option [value]="resource" *ngIf="!parentId">
-                {{ resource.attributes[displayAttribute] }}
+                {{ resource.attributes[displayAttributes[0]] }}
             </mat-option>
         </ng-container>
 
@@ -41,7 +45,7 @@
     </mat-select>
 
     <button matSuffix mat-icon-button class="mat-button" *ngIf="hasRefresh"
-        (click)="refresh.emit()">
+        (click)="refresh()">
         <div fxLayout="row" fxLayoutAlign="center center">
             <mat-icon class="mat-hint">refresh</mat-icon>
         </div>
diff --git a/projects/ngx-jsonapi-material/src/lib/select/select.component.spec.ts b/projects/ngx-jsonapi-material/src/lib/select/select.component.spec.ts
index 968d817..3d14aa4 100644
--- a/projects/ngx-jsonapi-material/src/lib/select/select.component.spec.ts
+++ b/projects/ngx-jsonapi-material/src/lib/select/select.component.spec.ts
@@ -5,6 +5,7 @@ import { Resource, DocumentCollection } from 'ngx-jsonapi';
 import { MatSelectModule } from '@angular/material/select';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
 
 @Pipe({ name: 'filter' })
 class FilterPipeMock implements PipeTransform {
@@ -44,44 +45,29 @@ describe('NgxJsonapiMaterialComponent', () => {
         expect(component).toBeTruthy();
     });
     it('if limit is falsy, adaptiveArray should be set to collection.data in ngOnInit lifecycle hook', () => {
-        expect(component.adaptiveArray).toEqual(component.collection.data);
+        expect((component as any).collectionArray).toEqual(component.collection.data);
     });
-    it('if limit is truthy, adaptiveArray should be cut to that limit in ngOnInit lifecycle hook', () => {
+    it('toRelate should be set to equal collections corresponding resource in ngONInit lifecycle hook', () => {
         component.collection = new DocumentCollection();
         let first_resource = new Resource();
         first_resource.id = '1';
         first_resource.attributes = { data: 'first' };
-        let second_resource = new Resource();
-        second_resource.id = '2';
         component.collection.data.push(first_resource);
-        component.collection.data.push(second_resource);
-        component.toRelate = new Resource();
-        component.limit = 1;
-        component.ngOnInit();
-        fixture.detectChanges();
-        expect(component.adaptiveArray).toEqual([first_resource]);
-    });
-    it('toRelate should be set to euqal collections corresponding resource in ngONInit lifecycle hook', () => {
-        component.collection = new DocumentCollection();
-        let first_resource = new Resource();
-        first_resource.id = '1';
-        first_resource.attributes = { data: 'first' };
         let second_resource = new Resource();
         second_resource.id = '2';
-        component.collection.data.push(first_resource);
         component.collection.data.push(second_resource);
         component.toRelate = new Resource();
         component.toRelate.id = '1';
-        component.ngOnInit();
+        component.selectedResource(first_resource);
         fixture.detectChanges();
         expect(component.toRelate.attributes.data).toEqual('first');
         expect(component.toRelate).toEqual(first_resource);
     });
-    it('updateRelationships should emit toRelateChange EventEmitter with the passed resource', () => {
+    it('selectedResource should emit toRelateChange EventEmitter with the passed resource', () => {
         let resource = new Resource();
         resource.id = '3';
         let toRelateChange_spy = spyOn(component.toRelateChange, 'emit');
-        component.updateRelationships(resource);
+        component.selectedResource(resource);
         expect(toRelateChange_spy).toHaveBeenCalledTimes(1);
         expect(toRelateChange_spy).toHaveBeenCalledWith(resource);
     });
@@ -101,45 +87,45 @@ describe('NgxJsonapiMaterialComponent', () => {
             });
         });
     });
-    it ('when a option is selected, mat-select should display the resource attribute passed as displayAttribute', async () => {
-        component.collection = new DocumentCollection();
-        let resource = new Resource();
-        resource.id = '1';
-        resource.attributes = { data: 'first' };
-        component.collection.data.push(resource);
-        component.displayAttribute = 'data';
-        component.removeRelationships = false;
-        component.placeholder = undefined;
-        component.toRelate = new Resource();
-        component.toRelate.id = '1';
-        component.ngOnInit();
-        fixture.detectChanges();
-        await fixture.whenStable().then(async () => {
-            let mat_select = fixture.debugElement.query(By.css('mat-select'));
-            let mat_select_text = mat_select.query(By.css('span')).nativeElement.innerHTML;
-            expect(mat_select_text).toBe('Seleccione una opción');
-            mat_select.nativeElement.click();
-            fixture.detectChanges();
-            await fixture.whenStable().then(async () => {
-                let mat_options = fixture.debugElement.queryAll(By.css('mat-option'));
-                mat_options[0].nativeElement.click();
-                fixture.detectChanges();
-                await fixture.whenStable().then(() => {
-                    let updated_mat_select = fixture.debugElement.query(By.css('mat-select'));
-                    // Need to query for spn twice because the update is inserted
-                    let updated_mat_select_text = updated_mat_select.query(By.css('span')).query(By.css('span')).nativeElement.innerHTML;
-                    expect(updated_mat_select_text).toBe('first');
-                });
-            });
-        });
-    });
-    it('updateRelationships should be called each time a new option is selected', async () => {
+    // it ('when a option is selected, mat-select should display the resource attribute passed as displayAttribute', async () => {
+    //     component.collection = new DocumentCollection();
+    //     let resource = new Resource();
+    //     resource.id = '1';
+    //     resource.attributes = { data: 'first' };
+    //     component.collection.data.push(resource);
+    //     component.displayAttributes = ['data'];
+    //     component.removeRelationships = false;
+    //     component.placeholder = undefined;
+    //     component.toRelate = new Resource();
+    //     component.toRelate.id = '1';
+    //     component.ngOnInit();
+    //     fixture.detectChanges();
+    //     await fixture.whenStable().then(async () => {
+    //         let mat_select = fixture.debugElement.query(By.css('mat-select'));
+    //         let mat_select_text = mat_select.query(By.css('span')).nativeElement.innerHTML;
+    //         expect(mat_select_text).toBe('Seleccione una opción');
+    //         mat_select.nativeElement.click();
+    //         fixture.detectChanges();
+    //         await fixture.whenStable().then(async () => {
+    //             let mat_options = fixture.debugElement.queryAll(By.css('mat-option'));
+    //             mat_options[0].nativeElement.click();
+    //             fixture.detectChanges();
+    //             await fixture.whenStable().then(() => {
+    //                 let updated_mat_select = fixture.debugElement.query(By.css('mat-select'));
+    //                 // Need to query for spn twice because the update is inserted
+    //                 let updated_mat_select_text = updated_mat_select.query(By.css('span')).query(By.css('span')).nativeElement.innerHTML;
+    //                 expect(updated_mat_select_text).toBe('first');
+    //             });
+    //         });
+    //     });
+    // });
+    it('selectedResource should be called each time a new option is selected', async () => {
         await fixture.whenStable().then(() => {
             let mat_select = fixture.debugElement.query(By.css('mat-select'));
             expect(mat_select).toBeTruthy();
-            let updateRelationships_spy = spyOn(component, 'updateRelationships');
+            let selectedResource_spy = spyOn(component, 'selectedResource');
             mat_select.triggerEventHandler('ngModelChange', true);
-            expect(updateRelationships_spy).toHaveBeenCalledTimes(1);
+            expect(selectedResource_spy).toHaveBeenCalledTimes(1);
         });
     });
     it('if removeRelationships is truthy, -- Ninguna -- option should be enabled', async () => {
@@ -154,7 +140,8 @@ describe('NgxJsonapiMaterialComponent', () => {
                 let none_option;
                 mat_options.map(option => {
                     if (option.nativeElement.innerHTML.indexOf('-- Ninguna --') !== -1) {
-                        none_option = option.componentInstance.value;
+                        component.clearDisplay();
+                        none_option = component.toRelate;
                     }
                 });
                 expect(none_option).toEqual(null);
@@ -171,15 +158,16 @@ describe('NgxJsonapiMaterialComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable().then(async () => {
                 let mat_options = fixture.debugElement.queryAll(By.css('mat-option'));
-                let updateRelationships_spy = spyOn(component, 'updateRelationships');
+                let selectedResource_spy = spyOn(component, 'selectedResource');
                 mat_options.map(option => {
                     if (option.nativeElement.innerHTML.indexOf('-- Ninguna --') !== -1) {
-                        mat_select.triggerEventHandler('ngModelChange', option.componentInstance.value);
+                        component.clearDisplay();
+                        mat_select.triggerEventHandler('ngModelChange', component.toRelate);
                     }
                 });
                 fixture.detectChanges();
                 await fixture.whenStable().then(() => {
-                    expect(updateRelationships_spy).toHaveBeenCalledWith(null);
+                    expect(selectedResource_spy).toHaveBeenCalledWith(null);
                 });
             });
         });
@@ -202,11 +190,12 @@ describe('NgxJsonapiMaterialComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable().then(async () => {
                 let mat_options = fixture.debugElement.queryAll(By.css('mat-option'));
-                let updateRelationships_spy = spyOn(component, 'updateRelationships');
+                console.log('🧉', mat_options);
+                let selectedResource_spy = spyOn(component, 'selectedResource');
                 mat_select.triggerEventHandler('ngModelChange', mat_options[0].componentInstance.value);
                 fixture.detectChanges();
                 await fixture.whenStable().then(() => {
-                    expect(updateRelationships_spy).toHaveBeenCalledWith(resource);
+                    expect(selectedResource_spy).toHaveBeenCalledWith(resource);
                 });
             });
         });
diff --git a/projects/ngx-jsonapi-material/src/lib/select/select.component.ts b/projects/ngx-jsonapi-material/src/lib/select/select.component.ts
index ce87c9c..13757b3 100644
--- a/projects/ngx-jsonapi-material/src/lib/select/select.component.ts
+++ b/projects/ngx-jsonapi-material/src/lib/select/select.component.ts
@@ -1,51 +1,30 @@
-import { Component, Input, Output, EventEmitter, OnInit, ViewChild } from '@angular/core';
-import { Resource, DocumentCollection } from 'ngx-jsonapi';
+import { Component, Input, OnInit } from '@angular/core';
+import { ParentAutocomplete } from '../parent-autocomplete';
 
 @Component({
     selector: 'jam-select',
     styleUrls: ['./select.component.scss'],
     templateUrl: './select.component.html'
 })
-export class SelectComponent implements OnInit {
-    @Input() public appareance: 'fill' | 'outline' | 'legacy' | 'standard' = 'outline';
+export class SelectComponent extends ParentAutocomplete implements OnInit {
     @Input() public floatLabel: 'never' | 'always' = 'always';
     @Input() public multiple: boolean;
     @Input() public parentId: string;
-    @Input() public toRelate: Resource;
-    @Input() public placeholder: string;
-    @Input() public label: string;
-    @Input() public displayAttribute: string;
-    @Input() public collection: DocumentCollection;
     @Input() public removeRelationships: boolean;
-    @Input() public disabled: boolean;
-    @Input() public limit: number;
-    @Input() public hasRefresh: boolean = false;
 
-    @Output() public toRelateChange = new EventEmitter<Resource>();
-    @Output() public refresh = new EventEmitter<any>();
-
-    public adaptiveArray: Array<Resource> = [];
     public clear_relationships = null;
-
     public searchText: string = '';
 
-    public ngOnInit() {
-        if (this.limit) {
-            this.adaptiveArray = this.collection.data.slice(0, Number(this.limit));
-        } else {
-            this.adaptiveArray = this.collection.data;
-        }
+    public constructor() {
+        super();
+    }
 
-        if (this.toRelate) {
-            this.toRelate = this.collection.find(this.toRelate.id);
-        }
+    public ngOnInit() {
+        this.reload();
     }
 
     public updateFilter(search_text: string): void {
         this.searchText = search_text;
-    }
-
-    public updateRelationships(resource: Resource) {
-        this.toRelateChange.emit(resource);
+        this.autocompleteCtrl.setValue(this.searchText);
     }
 }
diff --git a/src/app/books/components/book.component.html b/src/app/books/components/book.component.html
index e877b7f..2be6f09 100644
--- a/src/app/books/components/book.component.html
+++ b/src/app/books/components/book.component.html
@@ -16,26 +16,26 @@ <h4>Author (one)</h4>
 
         <h4>Photos (many)</h4>
         <p><small>This a relationship with <i>hasMany:true</i></small></p>
-        <ul *ngIf="book.relationships.photos.builded">
+        <ul *ngIf="book?.relationships.photos?.builded">
             <li *ngFor="let photo of book.relationships.photos.data">
                 URI: <a href="{{ photo.attributes.uri }}">{{ photo.attributes.uri }}</a>
             </li>
         </ul>
 
-        <jam-select
-            [collection]="authors"
+        <jam-select [displayAttributes]="['name']"
+            [service]="authorsService"
+            [removeRelationships]="true"
             [hasRefresh]="true"
             [(toRelate)]="book.relationships.author.data"
-            displayAttribute="name"
-            [removeRelationships]="true">
+        >
             <jam-option-footer url="//multinexo.com" [openNewTab]="true"></jam-option-footer>
         </jam-select>
 
-        <jam-chips-autocomplete relationAlias="author" appearance="outline"
+        <!-- <jam-chips-autocomplete relationAlias="author" appearance="outline"
             [resource]="book"
             [service]="booksService"
             [attributesDisplay]="['title']"
-        ></jam-chips-autocomplete>
+        ></jam-chips-autocomplete> -->
     </mat-card-content>
     <mat-card-actions align="start">
         <a mat-button color="accent" routerLink="/books">Volver</a>
diff --git a/src/app/books/components/books.component.html b/src/app/books/components/books.component.html
index 0fe217c..bb66a48 100644
--- a/src/app/books/components/books.component.html
+++ b/src/app/books/components/books.component.html
@@ -31,10 +31,10 @@ <h3>Books</h3>
 
 <jam-autocomplete icon="book"
     [previewSelected]="true"
-    [toggleResource]="books?.data[0]"
-    [services]="booksService"
+    [toRelate]="books?.data[0]"
+    [service]="booksService"
     [displayAttributes]="['title', 'date_published']"
-    (toggleResourceChange)="selected($event)"
+    (toRelateChange)="selected($event)"
 ></jam-autocomplete>
 
 <div class="mat-elevation-z2">