Integrating sg-autocomplete Component

What is sg-autocomplete Component? sg-autocomplete component is a user interface element that functions like a text input field, but as the user types, it dynamically suggests relevant options from a predefined json list, allowing them to quickly select a matching value instead of typing the full term manually. You can configure with any elements from the json file. You can navigate the autocomplete dropdown using mouse or tab key from keyboard. Getting Started Use the below command to add your package in your application npm i sg-autocomplete you can consume it in your application as shown below: Say for Example if your JSON element is like this { url: "https://cdn-icons-png.flaticon.com/512/1804/1804486.png", title: "URL", description:"URL" }, { url: "https://i.ibb.co/7XqwsLw/fox.jpg", title: "Fox", description:"Fox" }, If you want to add "description" as the autocomplete suggestion list, you can do so like this sg-autocomplete autotext="description"> Options Examples Usage Now we will see how to integrate this libiary in your applications. a) Vanilla JavaScript You can include the component in your HTML file in two ways: 1. Using a CDN: Add a tag in the of your HTML file, pointing to the component's JavaScript file hosted on a CDN. For example: 2) Using ES Modules: If you prefer to use ES Modules, you can import the component using an import statement: import { defineCustomElements } from './dist/sg- autocomplete/loader/index.es2017.mjs'; defineCustomElements(); Make sure to adjust the paths according to your project structure. Use the component in your HTML: You can now use the component in your HTML like any other HTML element: Code Interact with the component using JavaScript: Example of Setting the JSON data: const autocompleteLst = [ {url: "https://cdn-icons-png.flaticon.com/512/1804/1804486.png", title: "URL", description:"URL"}, {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel", description:"Paris Eiffel"}, {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time", description:"Pizza Time"}, {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon ", description:"Salmon"}, ]; document.querySelector('sg-autocomplete').suggestionlist = autocompleteLst You can access and manipulate the component using standard DOM APIs: const input = document.querySelector('#sg-autocomplete'); Handle events: input.addEventListener('click', function(event) { // Code to execute when the button is clicked console.log('Input Value:'+ event.target.value); }); input.addEventListener("keydown", (e) => { console.log(e.key+'Input Value keydown:'+ e.target.value); }); b) Angular Step 1: Add an import to main.ts import { defineCustomElements} from '../node_modules/sg-autocomplete/loader'; And somewhere near the bottom we'll call this function. defineCustomElements(); Step 2: Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA. import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`; and then schemas: [ CUSTOM_ELEMENTS_SCHEMA ] Your app.module.ts should look like this: import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ declarations: [], imports: [], schemas: [ CUSTOM_ELEMENTS_SCHEMA], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags. Step 3: Declare the arrayData: In your Angular component's TypeScript file, declare the arrayData that you are passing. arrayData =[{"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"} , {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"}, {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"}]; autotext =this.arrayData ; Now, Set the arraydata value to the sg-autocomplete component ngOnInit() { const myElement = this.el.nativeElement.querySelector('sg-autocomplete'); if (myElement) { myElement.suggestionlist =this.autotext; } } Step 4: Now, in app.component.html you utilize your new custom element. Note: Here "description" is the JSON element name that will show it as a dropdown suggestion list. Step 5: To consume the autocomplete value you can create function access it like this getValue() { const autocompleteValue = this.el.nativeElement.querySelector('sg-autocomplete') as HTMLInputElement; } c) React Step 1: Now we'll add an import to index.js import { defineCustomElements} fro

npm i sg-autocomplete

{
    url: "https://cdn-icons-png.flaticon.com/512/1804/1804486.png", 
    title: "URL", 
    description:"URL"
  },
  {
    url: "https://i.ibb.co/7XqwsLw/fox.jpg",
    title: "Fox", 
    description:"Fox"
 },

sg-autocomplete autotext="description">

 const autocompleteLst = [
        {url: "https://cdn-icons-png.flaticon.com/512/1804/1804486.png", title: "URL", description:"URL"},
        {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel", description:"Paris Eiffel"},
        {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time", description:"Pizza Time"},
        {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon ", description:"Salmon"},
      ];
      document.querySelector('sg-autocomplete').suggestionlist = autocompleteLst

 const input = document.querySelector('#sg-autocomplete');

  input.addEventListener('click', function(event) {
  // Code to execute when the button is clicked
     console.log('Input Value:'+ event.target.value);
 });

  input.addEventListener("keydown", (e) => {
     console.log(e.key+'Input Value keydown:'+ e.target.value);
  }); 

import { defineCustomElements} from '../node_modules/sg-autocomplete/loader';

defineCustomElements();

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

 arrayData  =[{"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"} , 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"}];
  autotext  =this.arrayData ;

 ngOnInit() {
     const myElement = this.el.nativeElement.querySelector('sg-autocomplete');
      if (myElement) {
        myElement.suggestionlist =this.autotext;
      }
    }

 getValue() {
      const autocompleteValue = this.el.nativeElement.querySelector('sg-autocomplete') as HTMLInputElement;
    } 

import { defineCustomElements} from '../node_modules/sg-autocomplete/loader';

defineCustomElements();

function App() {
  const arrayData  =[{"url": 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
    {"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
    ];

  const myElement = useRef(arrayData);
    useEffect(() => {
      if (myElement.current) {
        const element = myElement.current;
        document.querySelector('sg-autocomplete').suggestionlist = element;
      }
    }, []);
  return (
    

          
    
  );
}

import { defineCustomElements} from '../node_modules/sg-autocompleter/loader';

defineCustomElements();

Related Posts

Will DeepSeek Shake OpenAI and NVIDIA?

Feb 14, 2025  0

The Developer’s Journey: Passion vs. Reality

Feb 19, 2025  0

Introducing Awesome SaaS Directory List

Feb 9, 2025  0