2013-12-10 31 views
0

如何使用durandal JS創建自動完成文本框。鑑於代碼不起作用。使用Durandal JS的自動完成文本框

視圖模型(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"> 

+0

究竟是「不工作」?你看到什麼症狀? – RockResolve

回答

3

一個很好的出發點是從激活刪除您的邏輯,並將其添加到連接的方法很多結果(假設你使用迪朗達爾2.0),如果不是你想補充它可以查看附件。當DOM準備就緒時,這會被觸發,所以你不需要將它包裝在$(function(){})中;

試一試,看看你的jQuery UI自動完成綁定正確。

我個人更喜歡使用Select2,然後爲它創建一個ko自定義綁定。

希望這能讓你朝正確的方向發展!

+0

我喜歡在http://twitter.github.io/typeahead.js/上找到twitter的類型 –

0

迪朗達爾是一個JavaScript框架,旨在處理許多事情,但它的主要目的不是創建UI元素。

使用Durandal,您可以使用Knockout創建聲明式雙向數據綁定,以提供控件,如自動完成文本框。您最好的選擇是研究如何使用Knockout創建自動完成文本框或下拉菜單。

谷歌提供了關於這個問題的

'autocomplete textbox knockout'