Autocomplete 自动完成在DurandalJS模态视图中不起作用

我正在为我的PHP web应用程序使用DurandalJS框架。我正在利用DurandalJS框架特性来显示模态视图

我有一个主页home.html，其中包含一个名为autocomplete.html的页面链接。单击此链接时，会在模式视图（DurandalJS提供的功能）中打开autocomplete.html页面

我还使用jQuery UI自动完成功能为文本框创建自动完成。当用户在文本框中键入任何内容时，他会根据通过键盘输入的字符得到一个建议列表

这里的问题是，如果autocomplete.html页面在浏览器中独立运行，则autocomplete功能可以工作。但是，当页面在模式中显示时，即通过DurandalJS框架运行（导航）项目时，此功能不会运行

谁能告诉我到底哪里出了问题？如能尽早答复，我们将不胜感激

下面给出了我的项目的源代码。请注意，我提供源代码的顺序与DurandalJS导航调用堆栈的执行顺序相同。我的应用程序的流程是index.php>>main.js>>>shell.js>>>shell.html>>>home.js>>>home.html>>>autocomplete.js>>>>autocomplete.html

当用户单击home.html页面上的Go to autocomplete链接时，将执行autocomplete.js>>>>autocomplete.html调用堆栈

main.js

shell.js

shell.html

autocomplete.html

jQueryUI自动完成演示
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
});

出口

标签：

• 关于DurandalJS的帮助，我提到：
• 有关自动完成的帮助，我参考了：[http://jqueryui.com/autocomplete/][3]

---

提前谢谢你。

我回答了一个类似的问题，这将对你有所帮助

但是您的autocomplete.html是错误的，并且在由Durandal编写时无法工作。您需要将其转换为durandal样式的html页面

将脚本标记添加到主机页。在热毛巾中，这是由捆绑包管理的，所以如果使用PHP，我不完全确定在哪里添加这些

删除HTML、脚本、元数据等。。。只需保留纯HTML标记

e、 g:

---

如果您仍有问题，请告诉我，我很乐意为您提供帮助

非常感谢您的回复。我正在使用Durandal 1.1.0，所以正如您所提到的，我将不得不尝试上述解决方案。正如您所说，我只保留了标记代码，从而重新构造了autocomplete.html文件；然而，这样做之后，当我在浏览器中运行页面时，自动完成拒绝工作，更不用说通过Durandal运行页面了。因此，我带回了我的原始代码，并开始一个接一个地删除它。自动完成功能在删除了所有标记（除了所有和两个标记）后仍能正常工作。（1/2）请注意，当我说“工作”时，我的意思是只有页面在浏览器中独立运行，而不是通过Durandal运行。在后一种情况下，即使所有代码都存在，自动完成功能也不起作用。（2/2）好的，尝试将自动完成的内容包装到另一个分区中。Durandal将使用页面中的第一个分区进行合成绑定，因此这可能是原因。我也这样做了，但没有任何更改。目前，我的autocomplete.html页面只有3个标记，后面是包含autocomplete控件的标记。您肯定需要删除脚本标记并将它们添加到您的.php页面。您的控制台窗口中是否也有错误？

require.config({
    paths: {
        'text': 'durandal/amd/text'
    }
});

define(function (require) {
    var app = require('durandal/app'),
        viewLocator = require('durandal/viewLocator'),
        system = require('durandal/system'),
        router = require('durandal/plugins/router');

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.start().then(function () {
        //The following statement is to help DurandalJS to find files only according to their names.
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
    router.mapNav("pages/home");
    router.mapNav("pages/autocomplete");

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

define(function (require) {
    var router = require('durandal/plugins/router');

    return {
        router: router,
        activate: function () {

        return router.activate('pages/home');
        }
    };
});

<br />
<br />
<br />
<br />
<div class="container-fluid page-host">
<!--ko compose: { 
        model: router.activeItem, //wiring the router
        afterCompose: router.afterCompose, //wiring the router
        transition:'entrance', //use the 'entrance' transition when switching views
        cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
    }--><!--/ko-->
</div>

    // JavaScript Document
    //This file loads the respective page's ViewModel (<Page>.js) and displays the View (<page>.html)

    define(function (require) {
        self.app = require('durandal/app');

        return {
            movies: ko.observable(),

            activate: function() {
                var self = this;

                //The following code in the function creates a modal view for the autocomplete page
                self.viewAutoCompleteModal = function(AutoComplete, element) {
                    app.showModal("viewmodels/pages/autocomplete");
                };
            }
        };
    });

<div id="applicationHost">
    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand">
                    <span>My application</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!--The following lines of code create href links for the My Application pages and directs the DurandalJS to the respective pages. The data-bind attribute calls the view<Page>Modal functions (which create a Modal view) which is defined in the ViewModel (<Page>.js file)-->
<br />
<br />
<a href="#/pages/autocomplete" data-bind="click: viewAutoCompleteModal">Go to Autocomplete</a>

// JavaScript Document
define(function (require) {
    var router = require('durandal/plugins/router');
    var moviesRepository = require("repositories/moviesRepository");

    return {
        activate: function (context) {

        }
    };

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>jQuery-UI Autocomplete Demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="http://localhost/rockontechnologies/Scripts/Script1.10.3/jquery-1.9.1.js"></script>
        <script src="http://localhost/rockontechnologies/Scripts/Script1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
            $(function() {
                var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ];
                $( "#tags" ).autocomplete({
                    source: availableTags
                });
            });
        </script>
    </head>

    <body>
    <div class="modal-footer">
    <ul class="btn-group">
        <button class="btn" data-bind="click: closeModal">Exit</button>
    </ul>
</div>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        </div>
    </body>
</html>

    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>

    define(function (require) {
    var router = require('durandal/plugins/router');
    var moviesRepository = require("repositories/moviesRepository");

    return {
        activate: function (context) {

        },
        attached: function (view) {

            var $tagInput = $(view).find('#tags'); 

             var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ];

                $tagInput.autocomplete({
                    source: availableTags
                });


        }

    };

});