如何使 jQuery 自动完成功能在 Durandal 中工作？

Question

我要在现有的 Durandal 应用程序中添加 autoComplete 功能。我已经在 main.js 和我的组件中声明了 jQuery-UI 库。我已经构建了一个带有值的测试数组来提供自动完成小部件（console.log 表明该数组中有值）。我在自动完成功能附近设置了一个保持点，当 document.ready 功能触发时，我可以看到应用程序传入。当我尝试在输入字段中输入一些字母时，没有显示任何值。我忘记了什么？

这是我的HTML（只是一部分）：

<!-- Operation ID -->
<div class="form-group">
    <label class="col-xs-4" data-bind="text:props.getProperty('label.search.operation.id')"></label>
    <div class="col-xs-8">
        <input type="text" id="operationID" data-bind="value: model.filter().operationID, click: advancedSearch" class="form-control" autocomplete=on />
    </div>
</div>

这里是对应的JS文件（部分），函数见文件末尾:

define(['durandal/app', 'knockout', 'jquery', 'services/propertiesService', 'utils/dateUtils', 'jquery-ui'],
    function(app, ko, $, props, dateUtils, ui) {

        var model = {};

        model.trackedObjects = [];
        model.successes = ko.observableArray();
        model.errors = ko.observableArray();
        model.warnings = ko.observableArray();

        model.currencies = ko.observableArray([]);
        model.buyers = ko.observableArray([]);
        model.platforms = ko.observableArray([]);
        model.steps = ko.observableArray([]);
        model.operationTypes = ko.observableArray([]);
        model.counterparts = ko.observableArray([]);

        model.choosenRoleCode = ko.observableArray();
        model.resultCount = ko.observable(0);

        // .................................
        // Many other properties

        //Set the button 'Go on top' if the scrolling is not on top of the window
        $(window).scroll(function(event) {
            var st = $(this).scrollTop();
            if (st > 0) {
                //On top
                model.hasScrollbar(true);
            } else {
                model.hasScrollbar(false);
            }
        });
        /* _____________________ENDING - Scroll bar____________________ */

        // AUTOCOMPLETE : Fill OperationID with values
        $(document).ready(function() {
            var availableTags = [
                "TOTO",
                "TITI",
                "TUTU"
            ];
            console.log("hop : " + availableTags); // hop : TOTO,TITI,TUTU
            $("#operationID").autocomplete({
                source: availableTags
            });
        });

        return model;
    })

有没有人遇到过这个问题？

Answer 1

您应该将所有 jQuery 功能移动到名为 compositionComplete 的生命周期回调中。此函数在整个视图组成并且 operationID 在 DOM

上可用后执行

define(['durandal/app', 'knockout', 'jquery', 'services/propertiesService', 
       'utils/dateUtils', 'jquery-ui'],
  function(app, ko, $, props, dateUtils, ui) {

    var model = {};

    model.trackedObjects = [];
    model.successes = ko.observableArray();
    model.errors = ko.observableArray();
    model.warnings = ko.observableArray();

    // ........

    model.compositionComplete: function() {
      var availableTags = ["TOTO", "TITI", "TUTU"];

      $("#operationID").autocomplete({
        source: availableTags
      });

      $(window).scroll(function(event) {
        var st = $(this).scrollTop();
        if (st > 0) {
          //On top
          model.hasScrollbar(true);
        } else {
          model.hasScrollbar(false);
        }
      });
    }

    return model;
  })

如何使 jQuery 自动完成功能在 Durandal 中工作？

How to make jQuery AutoComplete function work in Durandal?

jquery

jquery-ui

autocomplete

durandal