Smalltalk Seaside jQuery Search as you Type

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

So, what do I do in the "Do something here to hide values"?

The ID I get is the ID of a 'td' element of which I want to hide its parent 'tr' element.

I really don't want to do the new component and render thing as the table can contain many thousands of results, and displaying a new component with those results filtered on every keypress would make things way too slow.

Answer 1

If you're concerned about speed and are already sending all the data to the client during the initial render then you should do all the filtering in JS on the client.

I would make a CSS class like this:

.hideRow {
     display:none;
} 

and add or remove that class to the rows based on what is typed in the input.

Change your input render method to:

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

Then have a static js file you serve to that page that includes the filterRows function that adds or removes the class based on the value of the input

Answer 2

You might want to take a look at the JQAutocomplete component instead. This is the Seaside wrapper for the jQuery UI Autocomplete.

For this kind of behaviour, you really do not want a callback to the server on every keystroke. Instead, starting from a certain number of characters (which can be 1), a request is performed to the server to retrieve a list of items, which can then be further refined client side.