Knockout自動完成

我正在使用SP服務庫在SharePoint 2010項目中使用knockout js。我試圖爲其中一個字段實現自動完成功能。這裏是我的代碼：Knockout自動完成

這看起來如何我輸入字段：

<input id="newTask" title="task" data-bind="value: newTask" placeholder="Add new task" /> 
<button data-bind="click: addTask" class="btn">

這是我ViewModel.js：

(function() { 
function Task(data) { 
    this.Tasks = ko.observable(data.Tasks); 
    /*other fields*/ 
} 
function TaskListViewModel() { 
    var ctx = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);  
    var web = ctx.get_web(); 
    var taskList = web.get_lists().getByTitle("Tasks");  
    // Data 
    var self = this; 
    self.taskInformation = ko.observableArray([]); 
    self.newTask = ko.observable(); 
    /*other fields*/ 
    self.addTask = function() { 
     self.taskInformation.push(new Task(
      { 
       Tasks: this.newTask(), 
       /*other fields*/ 
       })); 
      self.newTask(""); 
    }; 

var taskListViewModel; 

$(document).ready(function() { 
    EnsureScriptFunc("sp.js", "SP.ClientContext", function() { 
    taskListViewModel = new TaskListViewModel(); 
    ko.applyBindings(taskListViewModel); 
    }); 
}); 
})();

該腳本從我View.html文件：

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#newTask').on('input propertychange paste', function (e) { 
     var val = $(e.currentTarget).val(); 
     viewModel.newTask(val); 
    }); 

    // Init 
    viewModel = new taskListViewModel(); 
    ko.applyBindings(viewModel, document.getElementById("parent-container")); 

    $().SPServices.SPAutocomplete({ 
     sourceList: "Bidders", 
     sourceColumn: "Title", 
     columnName: "task", 
     ignoreCase: true, 
     numChars: 3, 
     slideDownSpeed: 1000, 
     debug: true 
    }); 
}); 
</script>

自動完成工作，但是新添加的任務只需要輸入字符。例如：我輸入麥克風（自動完成可以讓我選擇微軟），當我選擇這個選項並點擊添加時，它只需要麥克風。

來源

2016-05-15 Азамат Исмагулов

'SPServices.SPAutocomplete'看起來像某種（DOM操縱）jQuery插件？如果是，請考慮創建一個自定義綁定處理程序。 – Jeroen

我做了這個我輸入元素

<input data-bind="textInput: task, valueUpdate:'blur'"/>

上和它的作品，只有在IE11。我的客戶使用ie，所以我對這種方法很滿意。

來源

2016-05-20 04:59:35

您需要手動觸發輸入以告訴敲除輸入已被操縱。

<input id="newTask" title="task" data-bind="value: newTask" placeholder="Add new task" /> 

$('#newTask').on('input propertychange paste', function (e) { 
    var val = $(e.currentTarget).val(); 
    viewModel.newTask(val); 
}); 

// Init 
viewModel = new TaskList(); 
ko.applyBindings(viewModel , document.getElementById("parent-container"));

進一步編輯

var _taskList; 
$(document).ready(function() { 
    EnsureScriptFunc("sp.js", "SP.ClientContext", function() { 
     _taskList = new TaskListViewModel(); 
     ko.applyBindings(_taskList); 
    }); 
    $('#newTask').on('input propertychange paste', function (e) { 
     var val = $(e.currentTarget).val(); 
     _taskList.newTask(val); 
    }); 
});

來源

2016-05-16 10:44:37

泰勒可以請你提醒我如何訪問我的ViewModel？我試過這個：TaskListViewModel.newTask（val）;但是我得到這個錯誤：Uncaught ReferenceError：TaskListViewModel未定義 –

請參閱編輯 - TaskListViewModel應該是該頁面的全局變量。 –

問題是，我把它放在一個名爲ViewModel的單獨的js文件中。它是這樣組織的，看到更新的任務帖子。我無法弄清楚它是如何使它成爲全局的（我試圖將TaskViewModel移動到函數之外，但是開始出現一些錯誤）。 –

由於您使用的value結合，可觀測值僅在模糊視圖模型更新。如果您使用KO 3.2+，則應使用textInput綁定，該綁定立即更新觀察值。

如果你不是，你應該考慮升級。我發現使用jQuery事件，如tyler_mitchell建議的那樣，並不像我希望的那樣可靠。但是如果你不升級，那就是要走的路。

來源

2016-05-16 15:16:40

我使用KO 3.4，textInput具有相同的問題... –

Knockout自動完成

回答

相關問題