How to search multiples values throught the search input

JujuPomme__

Hi,

New user of this component, i'd like to implement a feature where I can easily search several worlds in all columns of the table (first i'm trying with only one column ofc).

Actually, i did this as I found on several topics:

`$('#myTable_filter input').on('keyup', function () {

            var table = $('#myTable').DataTable();
            var searchTerms = this.value.toLowerCase().split(' ').join('|');
            table.column(0).search("^(" + searchTerms + ")$", true, false, true).draw();
        });

But it's not working and i'm not able to understand why.

When I try something like "WordA", I've the result. When I try "WordA WordB ..." I don't have any results even if both of them are in the table.

Can I have some help to fix this?

Thanks

kthorngren

I didn't create the input or event handler but your search code is working in this test case:
https://live.datatables.net/nadipixo/1/edit

Note that the regex you have will only work with exact matches. While typing you might see that there are no results in the table so you may want to change from keyup to change. If you have server side processing enabled then the server script will need to support building a regex query of the data source.

Can you provide a link to a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

JujuPomme__

Hi,

Thanks for your answer.

Yes, it works for some case. But in the example you send, if I search like "Angelina Bradley", it's not working and that's why i'm looking for.

I see how I can provide you a test case but I think that you understand properly the issue i'm talking about.

Thanks,

kthorngren

Then you will need to use a different separator, besides space, for the different search terms. Maybe use | then you won't need to split and join with |.

Kevin

kthorngren

Another option is to remove the ^ (start token) and $ (end token). The are requiring each search word to be the only word in the cell. If you searched for san francisco the regex pattern would require the full cell to have either san or francisco. Removing these tokens allow the search to find the text anywhere in the cell. Updated example:
https://live.datatables.net/nadipixo/2/edit

Kevin

JujuPomme__

Hi,

Thanks for your answer and the test case you provide. It's exactly working as I expect.

But now, i'm trying to bind this with the input provided by the component like my first post.

Actually, with your changes, I've this (sorry about rendering some code inside my comment, I'm not able to have a proper thing):

$('#myTable_filter input').on('change', function () {
               var table = $('#myTable').DataTable();
                var searchTerms = this.value.toLowerCase().split(' ').join('|');
                table.column(0).search("(" + searchTerms + ")", true, false, true).draw();
});

But this code is not working like your test case with the input functionnality. I tried several hooks on the input like 'keyup' and the result still the same.

Maybe can you help me in this way?

Thanks,

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

If it is working in Kevin's example, but not on your own page, you'll need to either link to your page, or update the example, so we can see the problem and help to diagnose the issue.

Allan

JujuPomme__

Hi Allan,

Here is the example Kevin's provide updated with my issue: https://live.datatables.net/nadipixo/10/edit

allan

$('#myTable_filter input')

isn't matching anything.

You could use:

$('div.dt-search input')

It seems odd to use the DataTables default search box as a column filter though. It will also be doing global filtering since you don't unbind the default listener.

Going back to your original question:

i'd like to implement a feature where I can easily search several worlds in all columns of the table

Isn't that exactly what the DataTables default global filter does? I'm not clear on what you are trying to do differently?

Allan

JujuPomme__

I'm new using DataTable and i'm not a javascript/frontend developer at all.

Are you supposing that i'm trying to invent an existing feature like this https://datatables.net/reference/api/filter()#Examples ?

My request is to use the default search input from the DataTable to find several words in some columns.

With the Kevin's example that I edited here (https://live.datatables.net/nadipixo/17/edit) the feature I want to add to this sample is to search dynamically throught the search input.

allan

My request is to use the default search input from the DataTable to find several words in some columns.

Do you mean you want to limit it to specific columns? Because at the moment it does what you are asking for - finding words in the columns.

Use columns.searchable to mark a column as not searchable.

Allan

JujuPomme__

Let's skip the multi-columns issue for the moment.

If I take this sample https://live.datatables.net/nadipixo/17/edit , how to replace the value variable by the content of the search input?

I tried with the selector your send, but i'm not able to have a result:

$('div.dt-search input')

allan

I honestly don't know what you are trying to do that is different from the search input that DataTables does by default. If you can explain that, I might be able to help you achieve what you want.

Are you looking for an OR filter? That seems to be what the Regex is doing?

Allan

JujuPomme__

I'm really sorry, I don't know how to explain my problem better than what I did.

I'm agree with you, I'm looking for an OR filter and this is what the regex is doing but datas in this sample https://live.datatables.net/nadipixo/17/edit "Angelica Ashton" are defined directly inside this "value" variable.

First, how can I bind the input search to this "value" variable to have something dynamic and not in raw?

To illustrate my purpose: I've an app, rendering a dictionary. I want to be able to find several words in one column (at the moment) throught the input search provided by the DataTable component. Is that better?

rf1234

https://live.datatables.net/barebika/1/edit

Please bear this in mind (@allan above):

It seems odd to use the DataTables default search box as a column filter though. It will also be doing global filtering since you don't unbind the default listener.

I didn't know how to unbind the default listener. So I just tried to trick it ...

This delayed global search does the trick by just overwriting the global search that was triggered a few milli-seconds earlier.

table.search("");

allan

Thanks for the clarification. I would strongly suggest that you don't use the DataTables default input. It is a global AND search.

Instead, you'd be much better off creating a feature plugin that inserts its own input and you should bind to that in the plugin's function. Listen for input events on it and then call search() similar to the code above.

Allan

JujuPomme__

Thanks for your answers, both of you.

I'll try to build a feature plugin to achieve my goal.

The example provided by @rf1234 is working as expected, but I understand that this is not how the component is supposed to be used.

Thanks,

JujuPomme__

Hi @allan ,

Considering that a feature plugin is what I need, do you know how can I implement it? Do you have some searching examples available somewhere?

Thanks for your help

allan

https://live.datatables.net/mekuwebi/1/edit .

You can customise that to suit the search action that you need.

If you don't want the default global (AND) search as well, then set topEnd: null in layout.

Allan

JujuPomme__

Hi @allan,

Thanks so much for your test case. I implement it and it works, that's fine (needed to upgrade my Datatable version, but this is not a problem)

One last thing. How to bind your last example with several values like @rf1234 did?
As can you see, I tried some stuff but nothing is working as expected: https://live.datatables.net/mekuwebi/3/edit

Sorry,

Thanks

allan

You would need to modify the value read from the input element, just like in that example.

JujuPomme__

I'm sorry, I don't understand what are you talking about.

In my last test case, I tried to add

api.search.fixed('customSearch', 'Angelica Ashton').draw();

and I tried with a regex also, but still fail...

kthorngren

Use a regex search as shown in the search.fixed() docs. Like this:
https://live.datatables.net/biqamoyi/1/edit

You may need to refine the regex pattern to fit your needs.

Kevin

JujuPomme__

This is what I was trying to do, the difference is about the Regex object..

Everything is good, I'm so sorry for that poor request. Thanks so much, both of you.

Rgds

JujuPomme__

Hi @kthorngren, @allan,

I'm so sorry to open again this thread.

I try some stuff to achieve my goal, but I'm not able to have something good.
I did my best to explain you through this example: https://live.datatables.net/biqamoyi/5/edit

I'm able to search through a custom feature several peoples like "Angelica Ashton". I added an input where I want to render another column separated by '_'. Let's take the position for example.
With "Angelica Ashton" It will render something like "System Architect_Technical Author" and this is correct !

BUT. If I search "Ashton Angelica", It will render... the same thing because of the table sorting.

Do you know how can I do this trick?

Thanks

kthorngren

Use the Datatables filter() API to filter the rows(). Updated example:
https://live.datatables.net/biqamoyi/6/edit

Note that I added columns.data to allow the use of objects, ie row.position. Otherwise the test case would need to use array notation like row[1] to get the position value.

Kevin

JujuPomme__

Thanks for your answer,

But there is the same problem:
If in the input search I've "BrunoAngelica" the input containing positions is "System Architect_Software Engineer" but I write "Bruno" first and Bruno's position is "Software Engineer". It's in second position because of the table sorting.

I'm sorry about my poor explanations, I do my best.

Thanks

kthorngren

If you want it sorted by the values in the array then add Javascript sort() after map(). You may also want to use Stack Overflow or other forum to learn how to get unique values from the array.

Kevin

JujuPomme__

Kevin,

I don't want to sort any values. I just want to respect the order type in the custom search bar.
My POV is that the datatable default sorting feature is overriding everthing else. I try a last explanation:

1/ If we want to search something like "AshtonCedricAngelica", I don't want their positions sorting by asc.
2/ I want their positions in typing order like: Ashtonsposition_Cedricsposition_Angelicasposition"
3/ Actually, without the sorting feature, I will have something like "Angelicasposition_Ashtonsposition_Cedricsposition" because of the default order of the table, sorting by asc.

Is that better? There is not sorting issue, I think we just need to separate behaviors of the table and the custom input.

Again sorry about difficulties to explain that. Thanks for your time and help.

kthorngren

Yes, this will be more complex. I would look using an object to get the initial matching rows with use rows().every() to loop through all the rows. Use the selector-modifier of { search:'applied' } to loop over only the rows matching the search term . Add the lower case name as the key and the position as the value to the object.

After rows().every() is done then loop through searchTerms and append access the object by name and append the value to acronymsList.

I'm sure I left out a couple minor details to make this work

Kevin