How to build an accessible search with multiple filters, history and pagination.

[Michael Murphy]

Hi Carson, 

I am trying to build an location search site with intercooler and have some questions. I have setup a demo of what I have managed so far. 

http://next.zuriplay.ch/en/search/

I would like to integrate the following features:

Active Search and Filtering of results.

This seems to be working ok, I would like to make the loading animation more visible, but this is maybe more a css styling issue. I am also wondering if a reset button might make it easier for users to reset when there is no results…

Search history

As the user types and changes filters, the URL should update. This would be like how the google search functions, and allows for the back button to work (returning to the results page for example), and allows for users to share or bookmark the search results. I have tried adding the  ic-push-url attribute and various other settings but have not managed to get it working. Any tips how to get this working with active search and filters?

Overlay results viewer. 

I would like to search result pages to be viewed in an overlay style similar to how Product Hunt works (which are basically like modal windows which stack on top of each other). I have created a hidden overlay on the page, and it seems to be loading in the div, but I cannot change the class on the div to make it visible. How can I add a class to this .overlay div to make it visible when they click on the page? I assume it's ic-add-class, but could not get it to work. 

And then once the modal is open, what would be the best way add a “close” or back button so they can return to the search results?

Pagination / Load more on search results

How can I make the pagination of search results load like in the “Click To Load” example of intercooler docs.? 

Other User Experience enhancements

How best to handle when a user presses enter or clicks on the search button?

My end goal will be to have a usable and accessible example of an advanced search application developed with progressive enhancement. I still need to work on the design and all the accessibility enhancements, but I would like to show that a site can have advanced functionality without compromising on accessibility. I would like to make the code available in some form once I am done, maybe as a tutorial for others to play with - it’s built in PHP using the Processwire framework, which like intercooler, is a nice tool to build custom sites without being complex. 

Thanks for building Intercooler,

Michael

[Carson Gross]

Hi Michael,

Sorry for the delay on this, it’s a big email so I kept putting it off.  Let me see if I can help:

Search History:

We don’t push variables into the header with an ic-push-url because there are quite a few intercooler specific values, as well as potential global includes, that might be part of the request and might not belong in it.  However, you can use the X-IC-PushURL response header to push the correct query string into the location bar on request completion.  That would make it very easy to pick out the specific search term and make it part of the current URL.

Overlay:

By and large intercooler isn’t going to work well with modal views, because they tend to be a “hide/show” model.  Instead, intercooler is more inline oriented.  I personally think this is more usable and more web-ish, but I understand that tastes vary.  The specific of a given overlay implementation are beyond the scope of this mailing list.  :)

Pagination:

WhatI do on the “Click To Load” example is encode the next page number in the link that I generate for the “Click To Load” button (e.g. ic-get-from=“/products?page=2”)  Nothing fancy, just the way it would work if you were doing normal web development.

User Experience Enhancements:

It sounds here like you want to put your ic-get-from attribute on the form rather than the button, so that hitting enter in a search box submits the form.

I’ll be around on gitter today if you need any further help:

  https://gitter.im/intercooler-js/Lobby

Cheers,

Carson

—

LeadDyno • Co-Founder

@carson_gross

--
You received this message because you are subscribed to the Google Groups "intercooler-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to intercooler-j...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Michael Murphy]

Hi Carson, 

Thanks for the reply and offer of help, much appreciated. 

I managed to get the url to update when searching using the X-IC-PushURL. For those working in PHP, setting the headers was very easy.

header('X-IC-PushURL: ' . $search_query_url_string);_

 (Thinking maybe a few examples of setting headers in the docs might be helpful for beginners, like in Ruby, Python and PHP?)

The only issue I am having now is that it seems to be appending some of the url strings (from selects), but this might be more an issue with my PHP code logic, will continue to investigate.

I have nearly worked out the load more example, again I think this is more an issue with my PHP pagination code…

Regarding the modal idea, it’s very similar to loading a page content in a container on the page, it would just be styled slightly different and have a an dditional back / close button. The problem I am having is changing CSS classes on other elements of the page. When the link is clicke I want to make the overlay div visible by adding a class ".show". I then need some way to remove the class again with anothet button (or just a back button)

What is the best way to add and then remove classes on other elements when a link is clicked?

Related to this, I have setup another example on this page with a simple navigation in the header (search | about | add playground). The navigation links load content within the div#content-area. However I cannot get it to set the correct active css class on the navigation item it is currently on. 

http://next.zuriplay.ch/en/search/

I am using ic-action toggleClass but it does not seem to do anything:

ic-action="toggleClass:active"

Any tips on how to easily add / remove / toggle css classes on different elements?

p.s. clicking back on the search example is currently broken which is more an issue with my PHP template logic, just refresh to see the search page again!

Thanks again,

Michael

[Michael Murphy]

Hi Carson,

I managed to get the css active class navigation changes done with a bit of simple jQuery.

I also managed to get the overlay idea kind of working with some extra jQuery but I had to embed the relevant jQuery code (to toggle the “show” class on the overlay) within the new parts that were being loaded - i.e. the modal content area, and the search results area. It would not work with the jQuery code in the footer or header of the page, not sure why.

Congratulations on all the recent publicity from hacker news, I noticed the stars count on the repo has doubled or tripled since I last looked! 

On a related intercooler theme, I was just reading about why the Changelog podcast used Turbolinks in their recent site redesign:

https://changelog.com/posts/why-we-chose-turbolinks

Would it be possible to do build a permanent sticky audio / video player like they did with intercooler?

Thanks,

Michael

[Carson Gross]

Great to hear you got it worked out.

Yes, intercooler has definitely blown up since that HackerNews post: it is over 3200 stars on Github now, which is insane.  :)

I guess this is as good a time as any to do my monthly begging that everyone tell their friends and family about intercooler, especially if you happen to know thought leaders out there.  I’m happy to help people prepare talks, come out and give talks at conferences, etc. and any help promoting the library is very much appreciated.

Thanks,

Carson

P.S. Intercooler 1.0.3 will be out in the next few days, with some cool news toys.

--