Custom autocomplete renderDropdown function

Questions
1

var autocompleteSearchbar = app.autocomplete.create({

                openIn: 'dropdown',

                inputEl: '#searchbarMain input[type="search"]',

                dropdownPlaceholderText: 'Type Product Names, Brands, Models, just anything',

                preloader: true,

                // typeahead: true,

                // limit: 20, //limit to 20 results

                source: function (query, render) {

                    var autocomplete = this;

                    var results = [];

                    if (query.length === 0) {

                        render(results);

                        return;

                    }

                    // Show Preloader

                    autocomplete.preloaderShow();

                    // Find matched items

                    _this.stock.filter(el => {

                        (el.title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || el.brand.toLowerCase().indexOf(query.toLowerCase()) >= 0  || el.model.toLowerCase().indexOf(query.toLowerCase()) >= 0) && results.push(el.title);

                    })

                    // Hide Preoloader

                    autocomplete.preloaderHide();

                    // Render items by passing array with result items

                    render(results);

                },

                renderDropdown(items){

                    console.log(items);

                    return `

                        <li>

                            <a href="#" class="item-link item-content">${items}</a>

                        </li>

                    `;

                }

            });
2

Look what it renders by default https://github.com/framework7io/framework7/blob/master/src/core/components/autocomplete/autocomplete-class.js#L652-L666

3

Why is it so difficult to pass a custom function to F7 autocomplete component? I’ve manipulated this over and over but to no avail. I just want to overwrite the default list but its either one exception or the other

var autocompleteSearchbar = app.autocomplete.create({

                openIn: 'dropdown',

                inputEl: '#searchbarMain input[type="search"]',

                dropdownPlaceholderText: 'Type Product Names, Brands, Models, just anything',

                preloader: true,

                // typeahead: true,

                // limit: 20, //limit to 20 results

                source: function (query, render) {

                    var ac = this;

                    var results = [];

                    if (query.length === 0) {

                        // render(results);

                        return;

                    }

                    // Show Preloader

                    ac.preloaderShow();

                    // Find matched items

                    _this.stock.filter(el => {

                        (el.title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || el.brand.toLowerCase().indexOf(query.toLowerCase()) >= 0  || el.model.toLowerCase().indexOf(query.toLowerCase()) >= 0) && results.push(el.title);

                    })

                    // Hide Preoloader

                    ac.preloaderHide();

                    // Render items by passing array with result items

                    return (results);

                },

                renderDropdown(){

                    const ac = this, results = [];

                    console.log(ac.params);

                    // if (ac.params.renderDropdown) return ac.params.renderDropdown.call(ac, ac.items);

                    return `

                        <div class="autocomplete-dropdown">

                            <div class="autocomplete-dropdown-inner">

                                <div class="list">

                                    <ul>

                                        <li>

                                            <a href="#" class="item-link item-content">

                                                <div class="item-media"><i class="icon icon-f7"></i></div>

                                                <div class="item-inner">

                                                    <div class="item-title">Ivan Petrov</div>

                                                </div>

                                            </a>

                                        </li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                    `;

                }

            });