键入时Smalltalk Seaside jQuery搜索

Question

renderFilterOn: html
|aFilter|
html textInput
onKeyUp: (html jQuery ajax callback: [:val | aFilter := val] 
                value: ((html jQuery this) value);
            script: [:s | 
                s add: ((s jQuery class: 'itemnames') 
                each: (s jQuery ajax callback: [:v | |aName anID |
                aName := ((v subStrings: $,) last).
                anID := ((v subStrings: $,) first).
                 ((aName asUppercase) includesSubString: (aFilter asUppercase))
                    ifFalse: ["Do something here to hide values"]] value: (Array with: ((html jQuery this) attributeAt: 'id') with: (html jQuery this) text)))
                    ]
        )

那么，我应该在“在这里做点什么来隐藏价值”中做些什么呢？

我得到的ID是一个'td‘元素的ID，我想隐藏它的父'tr’元素。

我真的不想做新的组件和渲染的事情，因为表可以包含成千上万的结果，并且在每次按键时显示一个新的组件并过滤这些结果会使事情变得太慢。

Answer 1

如果您关心速度，并且已经在初始呈现期间将所有数据发送到客户端，那么您应该在客户端使用JS进行所有过滤。

我会创建一个这样的CSS类：

.hideRow {
     display:none;
} 

并根据输入中键入的内容向行中添加或删除该类。

将输入渲染方法更改为：

renderFilterOn:html
html textInput
     id: html nextId;
     onKeyUp:((html jQuery id: html lastId) call:'filterRows').

然后将一个静态js文件提供给该页面，该文件包含filterRows函数，该函数根据输入的值添加或删除类

Answer 2

您可能想要看一看JQAutocomplete组件。这是jQuery UI Autocomplete的海滨包装器。

对于这种行为，您确实不希望在每次击键时都回调到服务器。取而代之的是，从一定数量的字符(可以是1)开始，向服务器执行请求以检索项目列表，然后可以进一步细化客户端。