自动完成文本框使用迪朗达尔JS [英] AutoComplete Textbox using Durandal JS

问题描述

我怎样才能创建一个使用迪朗达尔JS自动完成文本框。鉴于code不工作。

How can I create an autocomplete textbox using durandal JS. Given code not working.

视图模型（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">

推荐答案

一个很好的起点是从激活删除你的逻辑，并将其添加到连接的方法（假设你使用迪朗达尔2.0），如果不是你们想添加到viewAttached。这就会引发DOM就绪，所以你woudlnt需要包装在一个$（函数（）{}）;

A good starting point would be to remove your logic from activate and add it to an attached method (assuming you are using Durandal 2.0) If not you would add it to viewAttached. This is fired when the DOM is ready so you woudlnt need to wrap it in a $(function () {});

给一个尝试，看看你的jQuery UI的自动完成被正确绑定。

Give that a try and see if your jquery ui auto complete gets bound correctly.

我个人preFER使用选择二，然后创建一个自定义的劫为它具有约束力。

I personally prefer to use Select2 and then create a ko custom binding for it.

希望这可以让你在正确的方向！

Hope this gets you in the right direction!

这篇关于自动完成文本框使用迪朗达尔JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！