Question

我在我的SharePoint 2010项目中使用带有SP服务库的knockout js。我试图为其中一个字段实现自动完成功能。这是我的代码：

这是如何查看我的输入字段：

<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>

自动完成工作，但新添加的任务仅包含键入的字符。例如：我键入Mic（自动完成为Microsoft提供选项），当我选择此选项并单击添加时，它只需要Mic。

Answer 1

您需要手动触发输入以告知敲除输入已被操作。

<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);
    });
});

Answer 2

由于您正在使用value绑定，因此仅在模糊的视图模型中更新可观察值。如果你正在使用KO 3.2+，你应该使用textInput绑定，它会立即更新observable。

如果您不这样做，则应考虑升级。我发现使用jQuery事件（如tyler_mitchell所建议的那样）并不像我希望的那样可靠。但是，如果你没有升级，这就是你要走的路。

Answer 3

我已经在我的输入元素

上做了这个

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

并且只在IE11中有效。我的客户使用ie，所以我对这种方法感到满意。

淘汰赛自动完成

3 个答案: