Search code examples
jqueryajaxsmalltalkseaside

Smalltalk Seaside jQuery Search as you Type

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.

Solution

  • 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