angular - स्वत: पूर्ण लागू करना




angular2-template angular2-directives (6)

मुझे Angular2 के लिए एक अच्छा स्वत: पूर्ण घटक खोजने में समस्या हो रही है। बस कुछ भी जो मैं कुंजी-लेबल ऑब्जेक्ट्स की सूची पास कर सकता हूं और एक input फ़ील्ड पर एक अच्छा स्वत: पूर्ण हो सकता हूं।

केन्डो अभी तक कोणीय 2 का समर्थन नहीं करता है और यह कि हम ज्यादातर आंतरिक रूप से उपयोग करते हैं। ऐसा प्रतीत नहीं होता है कि कोणीय सामग्री कोणीय 2 का समर्थन करती है।

क्या कोई कृपया मुझे सही दिशा में इंगित कर सकता है या मुझे बता सकता है कि वे क्या उपयोग कर रहे हैं?

यह वही है जो मैंने अभी तक बनाया है। यह बहुत बुरा है और मुझे कुछ अच्छा लगने वाला है।

import {Component, EventEmitter, Input, Output} from 'angular2/core';
import {Control} from 'angular2/common';
import {Observable} from 'rxjs/Observable';
import {SimpleKeyValue} from '../models/simple-key-value'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

@Component({
selector: 'general-typeahead',
template: ` <div>
            <div class="input-group">
            <input type="text" [ngFormControl] = "term" class="form-control" placeholder={{placeHolder}} >
            </div>
            <ul>
                <li class="item" *ngFor="#item of matchingItems" (click)="selectItem(item)">
                    {{item.value}}
                </li>
            </ul>              
</div>`
})

export class GeneralTypeahead {

  matchingItems: Array<SimpleKeyValue>;
  term = new Control();

  @Input() allItems: Array<SimpleKeyValue>;
  @Input() placeHolder: string;
  @Output() onSelectItem = new EventEmitter<SimpleKeyValue>();

  constructor() {
    this.term.valueChanges
        .distinctUntilChanged()
        .debounceTime(200)
        .subscribe((term : string) => this.matchingItems = this.allItems.filter(sl => sl.value.toLowerCase().indexOf(term.toLowerCase()) > -1));
  }

  selectItem(sl: SimpleKeyValue) {
    this.onSelectItem.emit(sl);
  }
}

PrimeNG में एक देशी ऑटोकंप्लीटेड कंपोनेंट है जिसमें एडवांस फीचर जैसे टेम्प्लेटिंग और मल्टीपल सिलेक्शन हैं।

http://www.primefaces.org/primeng/#/autocomplete


मुझे पता है कि आपके पास पहले से ही कई उत्तर हैं, लेकिन मैं एक ऐसी स्थिति पर था, जहां मेरी टीम भारी पुस्तकालयों या बूटस्ट्रैप से संबंधित किसी भी चीज पर निर्भर नहीं होना चाहती थी क्योंकि हम सामग्री का उपयोग कर रहे हैं, इसलिए मैंने अपने स्वयं के नियंत्रण को बनाया, सामग्री की तरह शैलियों, आप मेरे autocomplete उपयोग कर सकते हैं या कम से कम आप एक नज़र दे सकते हैं कि आप कुछ दोष दे सकते हैं, एनपीएम पर साझा किए जाने वाले अपने घटकों को कैसे अपलोड किया जाए, इस पर सरल उदाहरणों पर बहुत अधिक प्रलेखन नहीं था।



मैंने auglar2 स्वतः पूर्ण के लिए एक मॉड्यूल बनाया है इस मॉड्यूल में आप सरणी, या url ang2-autocomplete लिंक का उपयोग कर सकते हैं: ang2-autocomplete


अद्यतन: इस जवाब के कारण ng2-completer का विकास एंगुलर 2 स्वतः पूर्ण घटक के रूप में हुआ। यह Angular2 के लिए मौजूदा स्वतः पूर्ण घटकों की सूची है:

  1. ng2-completer
  2. ng2-auto-complete
  3. ng2-typeahead

विचार के साथ आने का श्रेय @ दान-कैक्रो को जाता है

अपने स्वयं के निर्देशन की इच्छा रखने वालों के लिए मूल उत्तर रखना:

स्वतः पूर्ण सूची प्रदर्शित करने के लिए हमें पहले एक निर्देश निर्देश की आवश्यकता होती है, जो इनपुट पाठ के आधार पर सुझावों की सूची लौटाएगा और फिर उन्हें ड्रॉपडाउन में प्रदर्शित करेगा। निर्देश में सूची प्रदर्शित करने के लिए 2 विकल्प हैं:

  1. मूल-निर्धारण के संदर्भ को प्राप्त करें और DOM को सीधे जोड़ दें
  2. डायनामिककम्पोनेंटलॉडर का उपयोग करके सूची घटक को गतिशील रूप से लोड करें

यह मुझे लगता है कि दूसरा तरीका एक बेहतर विकल्प है क्योंकि यह सीधे DOM के साथ काम करके उन्हें दरकिनार करने के बजाय कोणीय 2 कोर तंत्र का उपयोग करता है और इसलिए मैं इस पद्धति का उपयोग करूंगा।

यह निर्देश कोड है:

"use strict";
import {Directive, DynamicComponentLoader, Input, ComponentRef, Output, EventEmitter, OnInit, ViewContainerRef} from "@angular/core";
import {Promise} from "es6-promise";
import {AutocompleteList} from "./autocomplete-list";

@Directive({
    selector: "[ng2-autocomplete]", // The attribute for the template that uses this directive
    host: {
        "(keyup)": "onKey($event)" // Liten to keyup events on the host component
    }
})
export class AutocompleteDirective implements OnInit {
    // The search function should be passed as an input
    @Input("ng2-autocomplete") public search: (term: string) => Promise<Array<{ text: string, data: any }>>;
    // The directive emits ng2AutocompleteOnSelect event when an item from the list is selected
    @Output("ng2AutocompleteOnSelect") public selected = new EventEmitter();

    private term = "";
    private listCmp: ComponentRef<AutocompleteList> = undefined;
    private refreshTimer: any = undefined;
    private searchInProgress = false;
    private searchRequired = false;

    constructor( private viewRef: ViewContainerRef, private dcl: DynamicComponentLoader) { }
    /**
     * On key event is triggered when a key is released on the host component
     * the event starts a timer to prevent concurrent requests
     */
    public onKey(event: any) {
        if (!this.refreshTimer) {
            this.refreshTimer = setTimeout(
            () => {
                if (!this.searchInProgress) {
                    this.doSearch();
                } else {
                    // If a request is in progress mark that a new search is required
                    this.searchRequired = true;
                }
            },
            200);
        }
        this.term = event.target.value;
        if (this.term === "" && this.listCmp) {
            // clean the list if the search term is empty
            this.removeList();
        }
    }

    public ngOnInit() {
        // When an item is selected remove the list
        this.selected.subscribe(() => {
            this.removeList();
        });
    }

    /**
     * Call the search function and handle the results
     */
    private doSearch() {
        this.refreshTimer = undefined;
        // if we have a search function and a valid search term call the search
        if (this.search && this.term !== "") {
            this.searchInProgress = true;
            this.search(this.term)
            .then((res) => {
                this.searchInProgress = false;
                // if the term has changed during our search do another search
                if (this.searchRequired) {
                    this.searchRequired = false;
                    this.doSearch();
                } else {
                    // display the list of results
                    this.displayList(res);
                }
            })
            .catch(err => {
                console.log("search error:", err);
                this.removeList();
            });
        }
    }

    /**
     * Display the list of results
     * Dynamically load the list component if it doesn't exist yet and update the suggestions list
     */
    private displayList(list: Array<{ text: string, data: any }>) {
        if (!this.listCmp) {
            this.dcl.loadNextToLocation(AutocompleteList, this.viewRef)
            .then(cmp => {
                // The component is loaded
                this.listCmp = cmp;
                this.updateList(list);
                // Emit the selectd event when the component fires its selected event
                (<AutocompleteList>(this.listCmp.instance)).selected
                    .subscribe(selectedItem => {

                    this.selected.emit(selectedItem);
                });
            });
        } else {
            this.updateList(list);
        }
    }

    /**
     * Update the suggestions list in the list component
     */
    private updateList(list: Array<{ text: string, data: any }>) {
        if (this.listCmp) {
            (<AutocompleteList>(this.listCmp.instance)).list = list;
        }
    }

    /**
     * remove the list component
     */
    private removeList() {
        this.searchInProgress = false;
        this.searchRequired = false;
        if (this.listCmp) {
            this.listCmp.destroy();
            this.listCmp = undefined;
        }
    }
}

निर्देश गतिशील रूप से एक ड्रॉपडाउन घटक को लोड करता है, यह बूटस्ट्रैप 4 का उपयोग कर ऐसे घटक का एक नमूना है:

"use strict";
import {Component, Output, EventEmitter} from "@angular/core";

@Component({
    selector: "autocomplete-list",
    template: `<div class="dropdown-menu  search-results">
                    <a *ngFor="let item of list" class="dropdown-item" (click)="onClick(item)">{{item.text}}</a>
               </div>`, // Use a bootstrap 4 dropdown-menu to display the list
    styles: [".search-results { position: relative; right: 0; display: block; padding: 0; overflow: hidden; font-size: .9rem;}"]
})
export class AutocompleteList  {
    // Emit a selected event when an item in the list is selected
    @Output() public selected = new EventEmitter();

    public list;

    /**
     * Listen for a click event on the list
     */
    public onClick(item: {text: string, data: any}) {
        this.selected.emit(item);
    }
}

किसी अन्य घटक में निर्देश का उपयोग करने के लिए आपको निर्देश को आयात करने की आवश्यकता होती है, इसे घटक निर्देशों में शामिल करें और चयन के लिए खोज फ़ंक्शन और ईवेंट हैंडलर के साथ प्रदान करें:

 "use strict";
import {Component} from "@angular/core";

import {AutocompleteDirective} from "../component/ng2-autocomplete/autocomplete";

@Component({
    selector: "my-cmp",
    directives: [AutocompleteDirective],
    template: `<input class="form-control" type="text" [ng2-autocomplete]="search()" (ng2AutocompleteOnSelect)="onItemSelected($event)" autocomplete="off">`
})
export class MyComponent  {

    /**
     * generate a search function that returns a Promise that resolves to array of text and optionally additional data
     */  
    public search() {
        return (filter: string): Promise<Array<{ text: string, data: any }>> => {
            // do the search
            resolve({text: "one item", data: null});
        };
    }

    /**
     * handle item selection
     */  
    public onItemSelected(selected: { text: string, data: any }) {
        console.log("selected: ", selected.text);
    }
}

अद्यतन: कोणीय 2 आरसी 1 के साथ संगत कोड


कोणीय-सामग्री में ऑटो-कम्प्लीट के लिए उपलब्ध कंपोनेंट में एक बिल्ड

इसे जांचने के लिए यहां क्लिक करें !

नोट: आप अपनी आवश्यकताओं के अनुसार इस स्वत: पूर्ण के फ़िल्टर तर्क को भी अनुकूलित कर सकते हैं।





angular2-directives