CSV and HTML search filter for WordPress

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'

// Set focus in filter input element on page load
// Default is false.
set_focus_on_load='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' 

// 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

Filter name in tableClear filter

on this table (with id name_table)

First nameLast name
EmilySmith
EdithJohnson
JohnWilliams
SophiaBrown
RobertJones
PaulaGarcia
JamieMiller
RobertDavis
MartinaRodriguez
PabloMartinez

Download

Download the plugin from wordpress.org.

Feel free to donate if you find the plugin useful :)

Comments

63 responses to “CSV and HTML search filter for WordPress”

  1. Luna Avatar

    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!

    1. Luna Avatar

      Never mind — I found the class: .hk-csv-search-output — but I still owe you beers!????

      1. jonas.hjalmarsson Avatar

        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 😀

  2. Tom Avatar
    Tom

    How can standard text be changed: “Nothing found when searching for:”?

    1. jonas.hjalmarsson Avatar

      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.

      1. Tom Avatar
        Tom

        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.

        1. jonas.hjalmarsson Avatar

          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 😉

          1. Tom Avatar
            Tom

            Hi, I want always exactly match. 🙂

          2. jonas.hjalmarsson Avatar

            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.

  3. hamid Avatar
    hamid

    hi
    i have one question
    how to add placeholder in csvsearch shortcode
    plz help me

    1. jonas.hjalmarsson Avatar

      Hi Hamid.

      I’m not sure what you want to do. Can you explain a little further.

      Jonas

    2. jonas.hjalmarsson Avatar

      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

  4. Gian Luca Avatar

    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

    1. jonas.hjalmarsson Avatar

      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)

  5. K Avatar
    K

    i got Uncaught SyntaxError: Invalid or unexpected token in line 605

    1. jonas.hjalmarsson Avatar

      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.

  6. Bryan Avatar
    Bryan

    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

    1. jonas.hjalmarsson Avatar

      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 🙂

  7. XZ Avatar
    XZ

    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.

    1. jonas.hjalmarsson Avatar

      That should not be that hard to fix. I put on my to do and try to fix in ASAP.

      1. XZ Avatar
        XZ

        I appreciate it, Mr Hjalmarsson! That’ll really help our work in digital humanities.

        1. jonas.hjalmarsson Avatar

          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.

          1. XZ Avatar
            XZ

            Many thanks for this prompt addition! I will report back when we get to test the new functionality in production.

  8. Erioluwa Avatar

    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

    1. jonas.hjalmarsson Avatar

      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?

  9. XZ Avatar
    XZ

    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?

    1. XZ Avatar
      XZ

      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!

  10. gabriel Avatar
    gabriel

    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?

    1. jonas.hjalmarsson Avatar

      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.

  11. med mouden Avatar

    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

    1. jonas.hjalmarsson Avatar

      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..

      1. jonas.hjalmarsson Avatar

        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

  12. Roman Avatar
    Roman

    Hello! Tell me how you can output a table from CSV without search fields?

    1. jonas.hjalmarsson Avatar

      Hi Roman.

      That’s a good idea. But perhaps that will be another plugin for that. I will look into that.

      / Jonas

  13. Steve Lawman Avatar

    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

  14. Steve Avatar

    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

    1. jonas.hjalmarsson Avatar

      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

  15. Khaliq Ahmad Avatar
    Khaliq Ahmad

    Hi,

    I used the only_search_in_column method but it is not working Kindly help what i can do

    Thank you
    Khaliq Ahmad

    1. jonas.hjalmarsson Avatar

      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.

  16. Steve Avatar

    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

    1. jonas.hjalmarsson Avatar

      Hi Steve.

      Thanks for the input! This is solved in the next update.

      / Jonas

  17. Michael Avatar
    Michael

    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

    1. jonas.hjalmarsson Avatar

      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?

  18. Jennifer Smith Avatar

    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.

    [csvsearch src='http://box5392.temp.domains/~miltonev/wp-content/uploads/2023/03/interments_test.csv' csv_separator=',']

    1. jonas.hjalmarsson Avatar

      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

  19. Alecos Loucaides Avatar

    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?

    1. jonas.hjalmarsson Avatar

      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.

  20. Jennifer Smith Avatar

    YES! That did it – thanks!

  21. Jennifer Smith Avatar

    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/

    1. jonas.hjalmarsson Avatar

      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!

  22. Daniel Avatar

    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?

    1. jonas.hjalmarsson Avatar

      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

  23. Daniel Avatar

    Hi Jonas, I see. Thanks for your prompt reply!

  24. Peter Avatar
    Peter

    Hi, great plugin.
    I can’t find a way to autofocus input field in [csvsearch]. Do you know any? Thank you.

    1. jonas.hjalmarsson Avatar

      Hi Peter,

      I will add an argument set_focus_on_load in the next release.

      Jonas

    2. jonas.hjalmarsson Avatar

      Hi again Peter.

      Now version 2.6 is available with this feature added.

      1. Peter Avatar
        Peter

        Hi, thank you. That is what I wanted.
        For me set_focus_on_load works great on frontend for non logged in users. When wordpress admin bar is visible the search field from admin bar is focused instead.

        1. jonas.hjalmarsson Avatar

          That sounds strange, I only set focus on that specific input. If you want me to check more in to this I would need login to check things at your site, I can’t reproduce this at my place.

          1. Peter Avatar
            Peter

            I just removed admin bar “seach node” I never ever used and found no more conflict on my site. Thanks for plugin, very helpful for me.

  25. Xenia Avatar
    Xenia

    Hello Jonas!

    Thank you thank you thank you for this! It was exactly what I needed. For some reason, the button text didn’t inherit the theme colors and looks awkward. I tried adding Additional CSS in Customizer like this:

    button.hk-csv-button {color:white;}

    but nothing happened. Do you have any tips? Also, is it possible to add some extra space between the search bar and the search button? I think that would make them much more visually appealing.

    1. jonas.hjalmarsson Avatar

      For the color of the button you have specified the wrong element, it’s an input, not button. But you can remove that and only use the class. And just tu make sure it will get used you can add !important to the CSS to force it.

      .hk-csv-button { color: white!important; }

      For the spacing you can try this:

      .hk-csv-button { margin-top: 20px!important; }

      1. Xenia Avatar
        Xenia

        Ahhh, that explains why the search button doesn’t look like other buttons on the website. Thanks, it worked!

Leave a Reply

Your email address will not be published. Required fields are marked *