Please add more documentation to what all of the options are and some more examples.

Is there a way to make it so you can select items using the up and down arrow keys and then hit enter to have it go to a URL?

Hi,
I'm using bootstrap-list-filter to filter existing list-elements on a page. I have it working great, however if no matches are found, I'd like to display some sort of message like "no results found" .. How do I configure that? Currently it just shows nothing when no results match.

The option itemChild doesn't take in account multiple element selector. The jQuery find method does support this. For example if I want to use { itemChild: 'a,span' }, the logic to hide all not matched elements will overrule all previous elements.

Use case:

<li class="list-group-item">
  <a href="#">Home</a>
  <span class="label label-default">keyword</span>
</li>

$('#searchlist').btsListFilter('#searchinput', {itemChild: 'a,span'});

Ignoring the itemChild option in this case won't work, as then the method .text() is called, which - with above usecase - will result in the result Homekeyword (notice the absent space between the words Home and keyword).

I have a button to clear the filter input. The input's value is clear but it does not trigger the event until I actually click on the input and press a backspace key.

Hi,
I recently used this awesome tool and made a few enhancements. I am more than happy if I can contribute.

One enhancement was adding event 'filtered'. The even fires right after list gets filtered. This comes in handy in cases when taking a post filter action is required. For example, in my case, I needed to show the number of available items after filtering had been done.

If this is confirmed, I can make a PR straight away.

Say, I have a text "More Than That". I want to filter the word "Than" or "That". Currently, I can only filter the first word. Thanks in advance.

What really means 'function builder'? Any example? I want to implement button there when no results were found. Thx in advance!

P.S. Well, example for each of those features would be nice and would bring so much clearness.

I have a problem with Turkish "İ" character, when I type lowercase "i" i got no results.

<form role="form">
        <div class="form-group">
            <input class="form-control" id="filterinput" type="search" placeholder="type istanbul..." />
        </div>
        <div id="mylist" class="list-group">
            <a class="list-group-item" href=""><span>İstanbul</span></a>
            <a class="list-group-item" href=""><span>İzmir</span></a>
            <a class="list-group-item" href=""><span>Ankara</span></a>
            <a class="list-group-item" href=""><span>Hatay</span></a>
            <a class="list-group-item" href=""><span>Teksas</span></a>
            <a class="list-group-item" href=""><span>Newyork</span></a>
            <!-- FILLED DYNAMICALLY -->
        </div>
    </form>

http://stackoverflow.com/questions/35664324/bootstrap-list-filter-problems-with-turkish-%C4%B0-character

Hi, I added the bootstrap-list-filter.src.js and made the changes to the html.
Everything works as expected, but the cancel button.
Somehow the click doesn't work.
Did I forget anything ?

Furthermore pressing enter clears the search :)

Hi,

I like your plugin very much and I use it for several websites :)
Thanks for sharing!

I've noticed that some people always hit the enter button to execute a search, even if there is no button :)
Right now I'm using this code to disable the form submission:

$('.searchform').on('keyup keypress', function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 13) { e.preventDefault(); return false; } });

Maybe it's something you like to add to your plugin?

ciao
ho usato il codice su una lista statica. E' possibile ricercare per parti di stringa?
Nel mio caso la lista a differenza dell'esempio è composta da stringhe con più termini e vorrei avere ritorni anche cercando, ad esempio, il secondo termine.
grazie
robi

Hi @stefanocudini

I'm trying to make use of bootstrap-list-filter.

As I understood it can perform basic search through RegExp.
I've tried to use it as you propose in your README but unfortunately it doesn't work.

What I'm doing wrong?

Thanx in advance for your response.

PS bootstrap and jquery were included, and I don't see any errors in console log.

Hi,

I can't use multipleselect plugin with your ListFilter. When i call multiple select plugin then your plugin not filter query. But when i type an invalid query then i see "NoResult" message. Can you help me?

How can you make it so it searches characters that the word contains? For example, it should find the item "American" if someone searches for "eri".

Thanks,

   sourceTmpl: '<a class="list-group-item" href="/profile/?id={id}"><span>{name}</span> <img src="{picture.data.url}"></a>',

the image is not show. {picture.data.url}

how to handle with this kind of json ?

Trying to filter using '$' but this issue applies to any special character in a javascript regexp. Because the character is not escaped the results are incomplete.

I added some code to escape the character when required after line 43. Not thoroughly tested yet and it's possibly what you were trying to do anyway.

val = val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");

code taken from http://stackoverflow.com/a/9310752/184129

I have a list of organizations and a list of facilities. I'd like the starting list to be organizations and when the user enters something in the search box, it filters/displays the facilities. Then, if no matches are found, it shows the emptyNode.

Similar to issue #8 in my case itemChild: 'h5, small', does not seem to work. If I use one of them it works like charm. Does itemChild support class as selector? I tried itemChild: '.list-group-item-head, .list-group-item-subhead', without success. Thanks in advance.

<div class="panel list-group" id="mylist">
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#targetID" data-parent="#dataParent">
        <h5 class="list-group-item-head">Head</h5>
        <span class="list-group-item-subhead"><small>Subhead</small></span>
    </a>
    <div id="targetID" class="sublinks collapse">
        <!-- more code here -->
    </a>
</div>

$('#mylist').btsListFilter('#filterinput', {
    itemChild: 'h5, small',
    resetOnBlur: false,
    initial: false
});

Hi,
I want filter list by multi selector (itemChild). I will set data- properties. For Example: data-iataCode = "ESB" data-iacoCode ="QWER" data-name="Adnan Menderes Airport" data-location="İzmir" an i want filter list by that data. Can you help me?

Hi,
I found that the filter doesn't work with keyword such as "6.1"
Is it bug?

Many thanks for this great development.
Is there a more verbose documentation of the option for the searchList than the js code?
I'm trying to insert the items into the list via js but then only get preexisting items filtered...

Help would be appreciated.

Many thanks,
Benjamin

How can you display text with a link when there are no matches found from the list?

Thanks,

Hello !

I really would like to use bootstrap-list-filter, but using it through meteor install is failing.

W20160104-16:55:42.371(1)? (STDERR) The package mrt:bootstrap-list-filter at 0.0.4 is incompatible with Meteor 0.9.0 or later.

Could we have an update on this?

Thank you!

hii
is it possible to filter without case sensitive ?
a -- give me Avi
BUT
avi -- does not give me Avi

i am tried to use
itemFilter: function(text, item){ /* changing the item */ },
but it doesn't work !!

thanks.

I have used in my project package mizzao: bootstrap-3 and after the installation of this package some page elements stopped working due to the presence of two bootstrap.js files in the page. This error was difficult to catch.
Maybe to give the user to choose bootrap package that he wants to use and remove that because of dependencies?

I would love to use this but it is missing documentation which makes it quite difficult.

I have a list with data-* attributes that I want to filter by their attributes but I can't find any examples or documentation on how to do that.

Thanks,
Josh