AutoComplete Js

2385 09 January 2021

No Description Available

Abhishek Singh

~ onex

Related Elements

12072
1
0

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

Slick Carousel Marquee Demo

onex

10790
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

10751
1
0

Why Choose us Four Column

onex

8171
1
0

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

Tesseract Js demo

onex

8119
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

7776
12
0

Grid service list with lighten

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

Slick Carousel Marquee Demo

Dynamically Create Form fields

Why Choose us Four Column

Tesseract Js demo

client-side image cropping by

Grid service list with lighten

Resourse

Log in