Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Can we separate the search input field from the list container? #216

elliottd opened this Issue Mar 3, 2014 · 5 comments


None yet
5 participants

elliottd commented Mar 3, 2014

If I move the search input field outside the list container, the search function fails to work. See an example here http://cdpn.io/zpuKF. (This is a small modification from the example on the list.js examples page.)

Is there a technical restriction that requires the input field to be in the same container as the list, or could we workaround this problem?

tanzim commented Mar 3, 2014

Did you actually make the change? Search seems to work fine for me (and F12ving says the input is inside the list container).

Looking at the source (https://github.com/javve/list.js/blob/master/src/search.js#L101) the default behavior is hardwired to lookup the search field inside the container:

events.bind(getByClass(list.listContainer, list.searchClass), 'keyup', function(e) {
    var target = e.target || e.srcElement; // IE have srcElement

Maybe you could manually apply a filter using your own filter callback to workaround?

elliottd commented Mar 3, 2014

Hrm, sorry about that. I thought I had made the change but apparently not. The example can now be found here http://codepen.io/anon/pen/IJuEF, I think.

I'll take a look at the location you suggested for a workaround to this problem.


javve commented Mar 3, 2014

It is intentional that the automatic search function does not work for a search field outside of the container. You can however add the search function to the search field manually.

Example http://codepen.io/javve/pen/itKsJ

With jQuery

$('.search').keyup(function() {

@javve javve closed this Mar 3, 2014

@javve Your example doesn't seem to work anymore?

afilina commented Aug 28, 2017

i.search is not a function

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment