jQuery自动完成功能不适用于materialize.js

Question

I'm using Materialize, Jquery for different things. If I don't have the materialize.js file linked to my html-page the autocomplete works flawlessly but if I add the file the autocomplete stops working. Debug shows it skips the whole function. Putting the function into no conflict mode doesn't help, either:

    var $j = jQuery.noConflict();
    $j('#'+rowid).autocomplete({});

Does anyone know where the issue lies? EDIT: the whole code function:"

    public AutocompleteArticles(item: OrderLine) {
    const outdatedarticle: OrderLine = item;
    let rowid = $("#txtsearch" + item.ModelId).attr('id');
    let articles: any = OrderPage.Instance().AvailableArticles;
    $('#'+rowid).autocomplete({
        source: function (request, response) {
            var searchtext = request.term.toLowerCase();
            response($.map(articles, function (item) {
                if (item.ArticleNumber.toLowerCase().includes(searchtext) || item.Name.toLowerCase().includes(searchtext) || item.Description.toLowerCase().includes(searchtext) ) {
                    return {
                        label: item.ArticleNumber + ' ' + item.Description,
                        value: {
                            ModelId: null,
                            ArticleModelId: item.ModelId,
                            OfferModelId: OrderPage.Instance().ModelId,
                            Name: item.Name,
                            Discount: item.Discount,
                            Amount: item.Amount,
                            Price: item.PriceExclVat,
                            ArticleNumber: item.ArticleNumber,
                            ArticleDescription: item.Description,
                            OrderLineDescription: item.OrderLineDescription,
                            VAT: item.TaxRate
                        }
                    }
                }
            }));

        },
        select: function (event, item) {
            let articlevalues: OrderLine = item.item.value;
            let newarticle: any = outdatedarticle;
            newarticle.ArticleModelId = articlevalues.ArticleModelId;
            newarticle.ArticleNumber = articlevalues.ArticleNumber;
            newarticle.ModelId = articlevalues.ModelId;
            newarticle.OfferModelId = articlevalues.OfferModelId;
            newarticle.Price = articlevalues.Price;
            newarticle.VAT = articlevalues.VAT;
            newarticle.Amount = outdatedarticle.Amount();
            newarticle.Discount = outdatedarticle.Discount();
            newarticle.ArticleDescription = articlevalues.ArticleDescription;

            let result: OrderLine = OrderPage.Instance().AddOrderLine(newarticle);
            OrderPage.Instance().Order.OrderLines.replace(outdatedarticle, result);
        }
    });


}

The articles get loaded into 'AvailableArticles' on document ready. Html:

    <input id="autocomplete" class="input-field autocomplete" data-bind="value: '', attr: { id: 'txtsearch' + ModelId }, event :{ keyup: OrderPage.Instance().AutocompleteArticles }" placeholder="Zoek" />

I'm also using KnockoutJS. The AutocompleteArticles gets triggered by keyup events.

Answer 1

hmm... I suspect you need to call var $j = jQuery.noConflict()

Before you import materialize

ie, something like

/* index.html */
<script src = "jquery.3.1.0.js"></script>
<script>
  var $j = jQuery.noConflict()
</script>
<script src = "materialize.1.0.0.js"></script>

/* other codes */

/* nb: $, NOT $j */
$('#'+id).autocomplete({
  /* autocomplete init obj */
})