This is one of my WordPress plugins (HTML filter and csv-file search) made to add a simple ajax-search in html or in uploaded CSV-file.
The plugin has two shortcodes.
[ csvsearch src='/path/file.csv']
[ filtersearch search_element='table'][ csvsearch ]
[ csvsearch ] is performing a search in an uploaded (or otherwise accessible) CSV-file. Use the format to set the output. use {0}, {1} etc for different columns in the file and {b}{/b}, {i}{/i} etc for simple formatting. Here is a sample with all arguments to use.
[ csvsearch
// url to uploaded file
src='URL'
// charset of file
charset='iso-8859-1'
// format the output
format='{b}{0}{/b}, {1}, {2}{br/}'
// format the output with link
format="{a href='{0}'}{1}{/a}"
// format the output with image
format="{img src='{0}' /}"
// search label
searchtext='search'
// format for output when instant search
instantformat='{0}'
// instant search enabled or not
instantsearch='false'
// data ID format, i.e. what to put in data-id of the listed element.
dataidformat="{0}"
// change the item separator depending on type of csv file used
csv_separator=';'
// change the nothing found message
nothing_found_message='Nothing found when searching for: '
// If true, the shortcode will only find exact matches, case sensitive.
// Default false.
exact_match='false'
// Add text where search-result will be placed. Default none.
placeholder_text='Place some default text before searching.'
// If you only want to search in one specific column you can specify this.
// If you only want to search in the first column you enter 0 here.
// Remove this argument or add -1 to search in all columns.
only_search_in_column='2'
// To show the first line as a header you can set show_header_row to true.
// Use class 'hk_header_row' to style.
// Default is false.
show_header_row='true'
// Combine the show_header_row attribute with
// headerformat attribute to set a specific style on the
// header (see format attribute to see how it works). Also
// you use the ignore_default_header_style='true' to remove
// the default style.
// Skip file check. Useful if WP installation is in sub
// directory which is not working properly. Add this
// argument to skip the file-checking. Default is false.
skip_file_check='true'
]Use this [ csvsearch ] shortcode
[ csvsearch
src='/wp-content/uploads/2022/01/sample2.csv'
searchtext='Search in file'
format='{b}{0} {1}{/b} {2} - {3}{br/}'
nothing_found_message='No hits for: '
show_header_row='true']to show this search
for a search in this csv-sample-file. Try searching for a name (I’m using the same sample names as in the table above) or a favorite color (pink, blue, red, …) or lucky number (3, 6, 7, …) to see the results.
[ filtersearch ]
[ filtersearch ] does a filter inside current html page. Specify which element you want to search within. You cah use either element type, .class_name of #id. See sample below for more arguments that can be used.
[ filtersearch
// what DOM element to search in, use element type, .class_name or #id
search_element='' // default to 'table'
// show table header or not when filtering
show_header_in_table='false'
// filter heading
text='Page filter'
// class to style clear icon
clear_icon_class='delete-icon'
// clear filter text
clear_text='Clear'
// enable or disable to set focus in filter input element on page load
set_focus_on_load='true'
]Use this [ filtersearch] shortcode
[ filtersearch search_element='#name_table' text='Filter name in table' show_header_in_table=true clear_text='Clear filter' set_focus_on_load=false]which enables this filter
on this table (with id name_table)
| First name | Last name |
|---|---|
| Emily | Smith |
| Edith | Johnson |
| John | Williams |
| Sophia | Brown |
| Robert | Jones |
| Paula | Garcia |
| Jamie | Miller |
| Robert | Davis |
| Martina | Rodriguez |
| Pablo | Martinez |
Download
Download the plugin from wordpress.org.
Donate
Feel free to donate if you find the plugin useful 🙂
54 Responses
Hello Jonas!
We owe you a beer (or two) for this excellent plugin. It easily solved our problem of making our database available to the public.
One question, though: is it possible to format the text output of the search results in preformatted font?
I played with the output a bit, but couldn’t figure out which element to apply the formatting to.
I appreciate your help!
Never mind — I found the class: .hk-csv-search-output — but I still owe you beers!🍻
Great to hear Luna! Perfect if the plugin in helped you. And feel free to donate 😉 Added a donate link at the bottom of this page now 😀
How can standard text be changed: “Nothing found when searching for:”?
Hi Tom. Now there is a setting for that in the shortcode. Add nothing_found_message=’The message: ‘ to the shortcode. The search term will be added after your message.
Thank you! You are great!
I have one more question. In my csv file I have a zip code in the format: 00-110. How to make the results of 00- not appear after typing 00-? I want an answer if the question is exactly the answer.
Hi again Tom.
It depends a little what you need. Do you always want exactly match, or just on some of the columns? The fix to make a setting to always make exact matches is doable, but if you want the zip column to be exact match but for example a city name to match just part of the name it’s a bit more complex to fix 😉
Hi, I want always exactly match. 🙂
Now I added the argument exact_match you can add. Set exact_match=’true’ to make only exact matches to be shown. This will check for exact case sensitive matches. Should work for you.
hi
i have one question
how to add placeholder in csvsearch shortcode
plz help me
Hi Hamid.
I’m not sure what you want to do. Can you explain a little further.
Jonas
Hi again Hamid.
Now I have added an argument ‘placeholder_text’. This adds a text at the same place as the search results will be. Hope this will help you.
Jonas
Compliment for the easy and functional plugin! Do you know if there is a function to display image from results ? I have try this: {img} and replace this tag, but this no work {img src=\”my_img_url\”} and also this {img src=\”my_img_url\{3}”} etc etc many thanks for you answer
Hi Gian.
I tried this now and it should work with setting parameter format to:
format=”{img src=’/your_url/{3}’/}”
or
format=”{img src='{3}’/}” if you have the complete image url in the file.
Make sure to use double quotes and single quotes at the right places. (and if you copy and paste my sample you probably have to replace the quotes with correct ones, it doesn’t always work when copy pasting)
i got Uncaught SyntaxError: Invalid or unexpected token in line 605
It sounds like there are something strange in your csv-file. Can you send that file to me and I will check what happens. Or just send a link to the page with the error.
can a csv be searched with multiple criteria/filters – e.g. search for rows that contain a match, for example, for Team Name = aa, Year = bb, Sport = cc
No, it only has support for one criteria right now. I’ll put this in the wishlist and I’ll see what I can do to fix it and how 🙂
Many thanks for creating this great plugin! I was wondering if it is currently possible to search only by the first column and output the entire row if the first column matches? That would be really helpful for searching dictionary files, where the lemma and the entry are a bit like the key-value pair in a hash table.
That should not be that hard to fix. I put on my to do and try to fix in ASAP.
I appreciate it, Mr Hjalmarsson! That’ll really help our work in digital humanities.
Now I’ve done a setting for that in the shortcode. Check the documentation on this page to see how to use it. Tell me if you are missing anything from it’s functionality.
Many thanks for this prompt addition! I will report back when we get to test the new functionality in production.
Hi Jonas
I’m trying to search through the csv file of about 15 columns such that whenever I type the name the data is associated with the row . I have tried making use of your plugin but it seems it won’t just work think where the problem lies is format of the output or something. Please what can I do
Can you explain more what you are trying to do? It really has nothing to do with how many columns you have as long as you format the output correctly. Can you sen me an example file?
When we use Google fonts for our search output, we can see a flash of unstyled content using system font before the content gets painted in the web font.
I wondered if it’s something that can be fixed by having the plugin delay displaying the output until it gets properly styled?
Never mind – we’ve realised it’s probably better achieved through html than adding more JavaScript to this plugin. We’re able to get the FOIT behaviour we needed by setting font-display to block!
Hello! how can I change the color of the search button? and it’s possible to separete lines and columns with lines jus like in excel?
You can use {hr/} as a line break instead of {br/} and style in css. Set the wanted output like [csvseach format='{b}{0}{/b}, {1}, {2}{hr/}’]. Style the hr by setting css:
hr {
border: 0;
border-bottom: 1px solid black;
}
And you can style the button by setting the css, this is an example larger black button
.hk-csv-button {
background: black;
border: 0;
border-radius: 5px;
padding: 10px;
margin-left: 10px;
color: white;
font-weight: 600;
}
If you want to change the style on the input field, use the class .hk-csv-input.
Hi Jonas
Thanks a lot for this plugin.
What I need is to set a mandatory filter. Empty Filter has to display nothing. The user has to put something in the filter field ( password ) to see the line of his his info.
Thanks and BR
Med
Hi Med..
I think I understand what you want. If I add setting that forces an exact match for a specific column i.e. your ‘password’ column. Only show that line. There are no security in this really, just to be clear. The csv-file that you upload is readable from the internet. Just so you know..
Hi again Med.
Have you tried combining the argument ‘exact_match’ and ‘only_search_in_column’? That should do what you are looking for.
/ Jonas
Hello! Tell me how you can output a table from CSV without search fields?
Hi Roman.
That’s a good idea. But perhaps that will be another plugin for that. I will look into that.
/ Jonas
Hi Jonas,
Thanks for a great plug in.
A quick question. I’m using your plugin to search a csv file based on a ham radio log file.
The csv has 8 rows and each row has a heading at the top [such as Callsign, Name, Date etc].
Is there any way for the plug in to display the heading as well [top row of the file].
I did ‘freeze’ the panes in the top row of the csv file but it seems the search does not recognise the ‘top row’ any differently to the other fields.
The end displayed formatting would be something like:
Callsign Name Date
G3ABC John 12/07/2022
G2ABC David 16/11/2021
Here’s an example of the returned data at present and all data is correct
12/11/1994,G3OOK/MM,5:40:00 AM,14.190Mhz,SSB,20M,John,59,, ,
17/11/1994,G3MCN,9:10:00 AM,14.195Mhz,SSB,20M,Harry,57,G, ,
24/11/2002,G3XFA,8:50:00 AM,18.136Mhz,SSB,17M,Roger,58,G, ,
27/11/2002,G3XFA,9:10:00 AM,18.140Mhz,SSB,17M,David,57,G, ,
I’m also wondering what the and references to as there’s nothing in the csv file.
Any help greatly appreciated,
Best regards
Steve Lawman
Hi Jonas – seems this web form has stripped out the important part of my last question.
I’ll try to explain as the ‘left arrow’ greater than and the ‘right arrow’ less than characters are removed by this form.
Returned results adds 2 additional data elements as below
So a search here [search any character on either log] http://percy.me.uk/
You see at the end of each returned data line it reads ‘left arrow’ 1 ‘right arrow’, then ‘left arrow’ 2 ‘right arrow’. this is on every line.
These are not lines of data in the csv file. I wonder what they are and if there is a way to prevent the returned data showing these.
Thanks again,
Regards
Steve
Hi Steve.
How do you use the shortcode? What do you use for format argument in the shortcode?
I have now added the argument show_header_row that can be used to show the first line as header in version 2.2.
/Jonas
Hi,
I used the only_search_in_column method but it is not working Kindly help what i can do
Thank you
Khaliq Ahmad
Sorry for the late reply. I tried this now and it works as expected for me here. The only thing I want to remind of is that it is 0 indexed, i.e. the first column is 0, second 1 etc.
Can you explain what happens and send me an example-file to see if I can help you further.
Hi Jonas – Happy New Year to you.
Appreciate the continued dev on the plug-in.
Now using V2.2 and with some small mods I now have some nice data output, complete with the ‘Header’.
If you feel up for it and a further idea.
When searching the csv file, if the returned results = NULL [no data found], then any chance in these instances that removes the header and defaulting to the text for example….
nothing_found_message=’Sorry – nothing found when searching:’
Keep up the good work!
Best wishes – Steve
Hi Steve.
Thanks for the input! This is solved in the next update.
/ Jonas
Hi Jonas,
Thanks for this wonderful plugin!
I am having trouble with separating the columns out on a search return. I am using the syntax provided {div}{0}{/div}{div}{1}{/div}, etc.
When I use your sample.csv file everything works correctly, but when I use a file of my own, it just spits out the match all in the {0}, so I’m assuming there is an issue with the way I am formatting my csv file. Is there an appropriate way to set up the file so that I can retrieve column by column? I am on a mac and have access to numbers (apple’s version of excel) and google sheets
It usually works with the Numbers export to csv function. Have you tried setting csv_separator=’,’ in the shortcode? If it is a comma-separated file you use, otherwise the default is ‘;’ to separate the columns? If it doesn’t work could you please send the file to me and let me check?
Hi Jonas – I don’t know why, but for some reason I can only get ‘Nothing found when searching for:’ even when I know the search term is there. I’m sure I’m missing something obvious but I’ve tried a dozen things and I can’t think what. The only difference I can see between my shortcode and yours is when I leave a space between [ and CSVSEARCH as you have, it won’t render the search box, so I left no space.
It seems to be a problem with the site since it’s installed in a sub directory when I check the file to see if it exists. So update the plugin (to v.2.4) and use the new argument skip_file_check=”true” together with src=”/~miltonev/wp-content/uploads/interments_test2.csv” which seems to work as far as I can see. Try it out and let me know if it works.
/ Jonas
Hi,
I love the simplicity of your plugin!
Is it possible to hide the csv file so it is not visible from the source code of the page?
Not as it is right now. I’m looking into refactoring some things and add a pro version of this with some more features, like this one. It’s beginning to take a little to much time to make the completely free as it is.
YES! That did it – thanks!
Great!
One more issue: I’ve used show_header_row=’true’, but while it appears at the top, it isn’t actually being inserted into the table. How do I get it to appear as the first row of the table, i.e. with column headers above the proper columns? I tried show_header_in_table=true, but it didn’t work.
http://box5392.temp.domains/~miltonev/search-interred/
Added two new attributes in v2.5. Now you can add headerformat in the same way as the normal format attrubute, there you can specify the same tr/td look that you want. Combine with ignore_default_header_style=’true’ to get rid of the default style. This should help!
Hi Jonas, after installing the “hk-filter-and-search.2.5.zip” on WP v6.2, I cannot find the config option either from the “Dashboard left menu” or submenu within the “settings”, Do you have any advice?
Hi Daniel.
There are no settings page for this plugin. All settings are set manually where you add the shortcode. See instructions on this page of how to add settings/arguments to the shortcode.
/ Jonas
Hi Jonas, I see. Thanks for your prompt reply!