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'


]

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

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

54 Responses

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

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

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

  4. 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. 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. Many thanks for this prompt addition! I will report back when we get to test the new functionality in production.

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

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

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

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

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

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

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

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

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

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

    File: http://box5392.temp.domains/~miltonev/wp-content/uploads/2023/03/interments_test.csv not found. Only support for local files.

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

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

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

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

Leave a Reply

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

Cart
Sign in
Loading...