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

时间:2018-10-26 07:25:48

标签: javascript jquery autocomplete materialize

我正在使用Materialize,Jquery进行其他操作。如果我没有将materialize.js文件链接到我的html页面,则自动完成功能会正常运行,但是如果添加该文件,则自动完成功能将停止工作。调试显示它跳过了整个功能。将函数置于无冲突模式也无济于事,

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

有人知道问题出在哪里吗? 编辑:整个代码功能:“

    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);
        }
    });


}

准备好文档后,文章将被加载到“ AvailableArticles”中。 HTML:

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

我也在使用KnockoutJS。 AutocompleteArticles由击键事件触发。

1 个答案:

答案 0 :(得分:0)

嗯...我怀疑你需要打电话 var $j = jQuery.noConflict()

之前,您导入materialize

即类似

/* 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 */
})