Using an array as the data source

[TCRodriguez]

Hello!

I hope this is the right place to ask this question. I'm currently working on building a search feature that goes through all the tags in my blog which are stored in an array. I'm stumped on the syntax of how to set the autoComplete engine to use it as it's "database". Any help/guidance would be very much appreciated!

[TarekRaafat]

Hello @TCRodriguez,

If your data is just an array of strings you'll just have to point the data.src to that array as shown below.

const tags = ["tag1", "tag2", "tag3"];

data: {
    src: tags
}

In case it's an array of Objects you'll need to add the key that the autoComplete.js engine will be looking for as shown below.

const tags = [{name: "tag1"}, {name: "tag2"}, {name: "tag3"}];

data: {
    src: tags,
    key: ["name"]
}

Try it, and let me know-how it goes.

Have a nice day! :)

[TCRodriguez]

Hey @TarekRaafat!

Thank you so much for the reply! Ok yes, then I had it set correctly. I believe my issue is now somewhere else in the configuration. Also, I was wondering if it was that we either follow the "Setup" section OR the "Installation" section? I didn't use npm for anything and only included the JSDeliver scripts as shown in the instructions and am not seeing this work.

I get the following error in the console:

main.js?id=27e5f330641d051e6a95:128 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
    at T.noResults (main.js?id=27e5f330641d051e6a95:128)
    at T.value (autoComplete.min.js:1)
    at autoComplete.min.js:1

I hope this isn't obnoxious to post here, but here's how I currently have it set up:

const autoCompleteJS = new autoComplete({
    data: {                              // Data src [Array, Function, Async] | (REQUIRED)
        src: tagsThatExistInBlogNamesFiltered,
  
    },
    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: "Search tags...",     // 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 => {
            source.setAttribute("id", "tags");
        },
        destination: ".autoComplete",
        position: "afterend",
        element: "ul"
    },
    maxResults: 5,                         // Max. number of rendered results | (Optional)
    highlight: {
        render: true,                    // Highlight matching results        | (Optional)
    },
    resultItem: {                          // Rendered result item            | (Optional)
        content: (data, source) => {
            source.innerHTML = data.match;
        },
        element: "li"
    },
    noResults: (dataFeedback, generateList) => {
        // Generate autoComplete List
        generateList(autoCompleteJS, 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(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
    },
    onSelection: feedback => {             // Action script onSelection event | (Optional)
        console.log(feedback.selection.value.image_url);
    }
});

[TarekRaafat]

My bad the example you've used is a bit outdated I should've updated it.

So, what I understand from the error Cannot read property 'appendChild' of null is that noResults unable to be appended to the resultsList container because id changed manually source.setAttribute("id", "tags"); instead of using the dedicated API.

Therefore, when you use the below code you're referring to the default API resultsList.idName which is #autoComplete_list not the one you've set manually #tags.

Issue:

document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);

Solution 1 [Referr to the set resultsList id manually]:

document.querySelector("#tags").appendChild(result);

Solution 2 [Use the resultsList.idName API]:

resultsList: {
  idName: "tags"
  destination: ".autoComplete",
  position: "afterend",
  element: "ul"
},

Please try it, and let me know-how it goes.