Topic: autocomplete does not work

stlpedro free asked 1 year ago


Expected behavior For the auto complete to work

Actual behavior Giving the following error... Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') at O0._initDropdown (:38:248078) at O0._init (:38:247694) at new O0 (:38:247208) at HTMLInputElement. (:249:13) at HTMLInputElement.dispatch (jquery.js?ver=3.7.0:5135:27) at elemData.handle (jquery.js?ver=3.7.0:4939:28) _initDropdown @ VM9178:38 _init @ VM9178:38 O0 @ VM9178:38 (anonymous) @ VM9715:249 dispatch @ jquery.js?ver=3.7.0:5135 elemData.handle @ jquery.js?ver=3.7.0:4939 17:32:53.109

Resources (screenshots, code snippets etc.)

Actual Code... All of them fail the same... function initPropsAutoCompleteWidthOrHeight(){ try { var predefinedValues = ["fit content", "1px", "2px", "3px", "4px", "5px"];

    function dataFilter(query) {
        // This function filters the predefinedValues based on the user's input
        return predefinedValues.filter(item => item.includes(query));
    }
    $(".autocomplete-WidthOrHeight").on("focus", function (e) {
        let item        = $(this);
        let inited      = item.data("inited");
        let fieldName   = item.attr("name");
        if (inited){ return; }
        EC7Utils.debug(`Initing field ${fieldName}...`);

        new mdb.Autocomplete(this, {
            filter: dataFilter
        });

        item.data("inited", true);
        EC7Utils.debug(`Initing field ${fieldName}...Done`);
    });

    // $(".autocomplete-WidthOrHeight").autocomplete({
    //     filter: dataFilter
    // });
    // $(".autocomplete-WidthOrHeight").each(function() {
    //     // Initialize mdb.Autocomplete for each input with the class .autocomplete-input

    //     EC7Utils.debug("looking to init " + $(this).attr("name") + "...");
    //     new mdb.Autocomplete(this, {
    //         filter: dataFilter
    //     });

    //     // let item = $(this);
    //     // item.autocomplete({
    //     //     filter: dataFilter
    //     // });
    //     EC7Utils.debug("looking to init " + $(this).attr("name") + "...Done!");

    // });
} catch (error) {
    EC7Utils.error("", error);
}

}


Kamila Pieńkowska staff answered 1 year ago


You should perform init not on input but on parent div.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: Mackbook pro
  • Browser: Version 116.0.5845.179 (Official Build) (x86_64)
  • OS: 13.4.1 (c)
  • Provided sample code: No
  • Provided link: No