当您键入时,Smalltalk Seaside jQuery搜索

时间:2013-06-20 08:41:07

标签: jquery ajax smalltalk seaside

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'元素。

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

2 个答案:

答案 0 :(得分:2)

您可能希望查看JQAutocomplete组件。这是jQuery UI Autocomplete的海边包装。

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

答案 1 :(得分:2)

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

我会像这样制作一个CSS类:

.hideRow {
     display:none;
} 

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

将输入渲染方法更改为:

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

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