AutoComplete Js

1082 09 January 2021

No Description Available

Abhishek Singh

~ onex

Related Elements

8951
1
0

Why Choose us Four Column

onex

8397
1
0

This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.

Dynamically Create Form fields

onex

7590
1
0

Slick marquee slider - manage HTML marquee with slick javascript library.

Slick Carousel Marquee Demo

onex

5850
12
0

Grid service list with lighten

onex

5834
1
0

Tesseract js demo scan text over the image by just doing small amounts of code.

Tesseract Js demo

onex

5240
0
0

Cropperjs is a feature-rich pure javascript library for cropping image. using this you can able to able to provide image cropping to the client-side.

client-side image cropping by

onex

var autoComplete = new autoComplete({
    data: {                              // Data src [Array, Function, Async] | (REQUIRED)
      src: async () => {
        // API key token
        console.log(autoComplete)
        const token = "this_is_the_API_token_number";
        // User search query
        const query = document.querySelector("#autoComplete").value;
        // Fetch External Data Source
        const source = await fetch(`https://tarekraafat.github.io/autoComplete.js/demo/db/generic.json`);
        // Format data into JSON
        const data = await source.json();
        // Return Fetched data
        console.log(data)
        return data;
      },
      key: ["food", "cities", "animals"],
      cache: false
    },
    query: {                             // Query Interceptor               | (Optional)
        //   manipulate: (query) => {
        //     return query.replace("pizza", "burger");
        //   }
    },
    sort: (a, b) => {                    // Sort rendered results ascendingly | (Optional)
        if (a.match < b.match) return -1;
        if (a.match > b.match) return 1;
        return 0;
    },
    placeHolder: "Food & Drinks...",     // Place Holder text                 | (Optional)
    selector: "#autoComplete",           // Input field selector              | (Optional)
    observer: true,                      // Input field observer | (Optional)
    threshold: 3,                        // Min. Chars length to start Engine | (Optional)
    debounce: 300,                       // Post duration for engine to start | (Optional)
    searchEngine: "strict",              // Search Engine type/mode           | (Optional)
    resultsList: {                       // Rendered results list object      | (Optional)
        container: source => {
            console.log(source)
            source.setAttribute("id", "autoComplete_list");
        },
        destination: "#autoComplete",
        position: "afterend",
        element: "ul"
    },
    maxResults: 5,                         // Max. number of rendered results | (Optional)
    highlight: true,                       // Highlight matching results      | (Optional)
    resultItem: {                          // Rendered result item            | (Optional)
        content: (data, source) => {
            console.log('resultItem:=>','data:',data,'source:',source)
            source.innerHTML = data.match;
        },
        element: "li"
    },
    noResults: (dataFeedback, generateList) => {
        // Generate autoComplete List
        console.log('noResult')
        generateList(autoComplete, dataFeedback, dataFeedback.results);
        // No Results List Item
        const result = document.createElement("li");
        result.setAttribute("class", "no_result");
        result.setAttribute("tabindex", "1");
        result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
        document.querySelector(`#${autoComplete.resultsList.idName}`).appendChild(result);
    },
    onSelection: feedback => {             // Action script onSelection event | (Optional)
    console.log(feedback)
        console.log(feedback.selection.value.food);
    }
});

Get HTML

Get CSS

Get JS

AutoComplete Js

Abhishek Singh

Related Elements

Why Choose us Four Column

Dynamically Create Form fields

Slick Carousel Marquee Demo

Grid service list with lighten

Tesseract Js demo

client-side image cropping by

Resourse

Log in