Hi,
I am creating a custom search filter for an entity list which filter/search list of items by multiple items typed into textbox.
For example: In search field if type id numbers like 1;2;3, so it should show me rows of these id numbers.
Current inbuilt search filter only filter based on one input, but my task is to filter based on multiple inputs.
I used jquery and javascript to achieve this but since the entity list has pagination, it works on only current page records.
How do I make it work on all entity list records?
Below is the code that I tried:
<script>
$(".entity-grid .view-toolbar .input-group").find("input").hide();
$(".entity-grid .view-toolbar .input-group").find("button").hide();
$(".entity-grid .view-toolbar .input-group-btn").prepend(" <input placeholder='Search' title='' aria-label='Search' data-original-title='Search' class='query form-control' id='myInput'>");
$(".entity-grid .view-toolbar .input-group-btn").append("<button type='button' aria-label='Search Results' title='Search Results' class='btn btn-default btn-hg'><span class='sr-only'>Search Results</span><span class='fa fa-search'></span></button>");
$('.entity-grid .view-toolbar .input-group-btn button').on('click', function(){
var input = document.getElementById("myInput");
var search = input.value.split(';');
if($('#myInput').val() === ""){
$(".entity-grid .view-grid .table tbody").find("tr").show();
}
else{
$('.entity-grid .view-grid .table tbody tr').each(function(index, element) {
var text = $(element).text().toLowerCase();
var show = search.filter(function(e) {
return e != '' && text.indexOf(e.toLowerCase()) >= 0;
}).length > 0;
$(element).toggle(show);
});
}
});
</script>
Please help me with ideas how to make it work?