jquery - 为什么只有在搜索框中输入搜索后才会加载表格数据？

Question

我有一个共享点列表，顶部有一个搜索框。仅当我在搜索框中输入任何内容后，数据才会加载，但我不明白为什么。它使用 knockout

HTML:

<input placeholder="Search…" id="searchInput" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
   <tbody data-bind="foreach: ideas">

    <tr>
        <td></td>
        <td data-bind="text: $data.IdeaNumber"></td>
        <td data-bind="text: $data.IdeaTitle"></td>
        <td data-bind="text: $data.IdeaStatusValue"></td>
        .....
        <td></td>
    </tr>

</tbody>

View 模型:

var viewmodel = {
    query: ko.observable("")
    };

viewmodel.ideas = ko.dependentObservable(function() {
        var search = this.query().toLowerCase();
        return ko.utils.arrayFilter(ideaArray, function(idea) {
            return idea.IdeaTitle.toLowerCase().indexOf(search) >= 0;
        });
    }, viewmodel);

任何建议都会很好，谢谢。

Answer 1

这是因为您的输入设置:

data-bind="value: query, valueUpdate: 'keyup'"

这是 Update设置为keyup事件，仅在输入一些数据后才会触发。

请参阅Knockout documentation对于所有可能的值:

• input - 当<input>的值时更新您的 View 模型或<textarea>元素变化。请注意，此事件仅由相当现代的浏览器(例如 IE 9+)引发。
• keyup - 当用户释放按键时更新您的 View 模型
• keypress - 当用户键入按键时更新您的 View 模型。与 keyup 不同，当用户按住某个键时，此操作会重复更新
• afterkeydown - 当用户开始输入字符时立即更新您的 View 模型。这是通过捕获浏览器的 keydown 事件并异步处理该事件来实现的。这在某些移动浏览器中不起作用。

如果您希望最初在文本框中显示某些值，您可以更改 viewmodel :

var viewmodel = {
  query: ko.observable("Search here...") // will populate the textbox
};