使用 Durandal JS 的自动完成文本框答案

【问题标题】：AutoComplete Textbox using Durandal JS使用 Durandal JS 的自动完成文本框
【发布时间】：2013-12-27 15:31:33
【问题描述】：

如何使用 durandal JS 创建自动完成文本框。给定的代码不起作用。

viewModel(js)

define(['repositories/customerRepository', 'plugins/router', 'plugins/http', 'durandal/app', 'knockout'], function (customerRepository, router, http, app, ko) 
{
return {
    router: router,

    activate: function () {

        var data = customerRepository.listMovies();

        $(function () {
        $("#movie").autocomplete({
            source: data,

            focus: function (event, ui) {
                $("#movie").val(ui.item.name);
                return false;
            },
            select: function (event, ui) {
                $("#movie").val(ui.item.name);
                // $("#friend-id").val(ui.item.id);
                return false;
            }
        })

               .data("ui-autocomplete")._renderItem = function (ul, item) {

                   return $("<li>")
                       .append(
                       "<a>" + "<table><tr><td rowspan=2>" + item.name + "</td></tr><tr><td>" + item.barcode + "</td></tr></table>")
                           .appendTo(ul);

               };
        });

    },




};

});

视图(html)

 <input id="movie" type="search" class="form-control" data-bind="value: searchModel.searchTerm" placeholder="Name / Bar code">

【问题讨论】：

究竟什么是“不工作”？你看到了什么症状？

标签： javascript jquery asp.net-mvc knockout.js durandal

【解决方案1】：

一个好的起点是从激活中删除您的逻辑并将其添加到附加方法中（假设您使用的是 Durandal 2.0）如果不是，您会将其添加到 viewAttached。这在 DOM 准备就绪时触发，因此您不需要将其包装在 $(function () {});

试一试，看看您的 jquery ui 自动完成是否正确绑定。

我个人更喜欢使用Select2，然后为它创建一个ko自定义绑定。

希望这能让您朝着正确的方向前进！

【讨论】：

【解决方案2】：

Durandal 是一个旨在处理许多事情的 JavaScript 框架，但它的主要目的不是创建 UI 元素。

借助 Durandal，您可以使用 Knockout 创建可提供自动完成文本框等控件的声明式双向数据绑定。最好的办法是研究如何使用 Knockout 创建自动完成文本框或下拉菜单。

Google 提供了许多关于该主题的结果

'autocomplete textbox knockout'

【讨论】：