How to create an AJAX Custom Search with TukuToi Search and Filters Plugin

In this document we describe how to add a (AJAXified) Custom Search to your website, listing Posts that can be filtered by Categories, Tags, Authors and a Free Text Search. The results will be laid out in a Bootstrap Card Deck, and the search will be using both HTML Native Multiple Select DropDowns as well as Select2 DropDowns. We will also add a Reset button as well as pagination. A search button is not required, since it will be powered with AJAX (live results). To get started, add a Template under the ClassicPress Dashboard > Templates and name it for example “Full page search”. Go straight ahead to build this search/list with ShortCodes and HTML. We have put a small example below to get you started. After you’re done, you can insert this Template using the ShortCode tkt_scs_template (there is a copy-this in the right sidebar of the Template editor that allows you to copy the ShortCode) into any page or post, or even into another TukuToi Template. Note, you can also add this code or build this search and list directly in a page, but it is not suggested, because if any user below the Administrator Role would be editing said page, all special contents (HTML) would be removed, due to ClassicPress’s and TukuToi Search and Filters / TukuToi Templates security measures. Thus, it is best to add this code into a Template, and then insert the ShortCode into a Page to render said template, or assign the template to a certain content type or replace the content of a content type with it.

<div class="container">
    [tkt_scs_searchtemplate type="ajax" customid="" customclasses="" instance="blog_posts"]]
    <div class="row pb-3 d-flex justify-content-center">
        <div class="col-md-3">
            <div class="form-group [[tkt_scs_postinfo item='' show='ID' filter='raw' sanitize='intval']]">
                [[tkt_scs_selectsearch placeholder="Search by Category" urlparam="cater" searchby="cat" type="single" customid="an_id" customclasses="form-control"]]
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                [[tkt_scs_selectsearch placeholder="Search in tags" urlparam="tags" searchby="tag__in" type="multipleS2" customid="tags_search" customclasses="form-control"]]
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                [[tkt_scs_selectsearch placeholder="Search by Author" urlparam="writer" searchby="author__in" type="multipleS2" customid="author_search" customclasses="form-control"]]
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                [[tkt_scs_textsearch placeholder="Search By Title or Content" urlparam="search" searchby="s" customid="" customclasses="form-control"]]
            </div>
        </div>
    </div>
    <div class="row d-flex justify-content-left pb-3">
        <div class="col-md-3">
            [[tkt_scs_buttons label="Submit" urlparam="" value="" searchby="" type="submit" autofocus="" form="" formtarget="_self" customid="submit-search" customclasses="btn btn-success"]]
        </div>
        <div class="col-md-3">
            [[tkt_scs_buttons label="Reset" urlparam="" value="" type="reset" autofocus="" form="" formtarget="_self" customid="" customclasses="btn btn-danger"]]
        </div>
    </div>
    [[/tkt_scs_searchtemplate]
    [tkt_scs_loop instance="blog_posts" type="post" error="No Posts Found" pag_arg="step" posts_per_page="5" container="div" customclasses="row row-cols-1 row-cols-md-5 g-4" ]tkt_base64_dGt0X2Jhc2U2NF9kR3QwWDJKaGMyVTJORjlZVVRCTFNVTkJaMGxEV1dwbFJFNUVUekpTY0dScFFtcGlSMFo2WTNvd2JVa3paM2xOYW5ScVlqSjNiVWt6WjNsTmFuTnRTVE5uZWxKVWMwNURhVUZuU1VOQlowbERRV2RLYVU0MFRUQk5OMXBIYkRKSlIwNXpXVmhPZWxCVFdXcGxSRWw1VHpKT2FHTnRVV2RoUXpCNFRVUkJiVWt6WjNsTmFuTnRTVE5uZWxKVWMwNURhVUZuU1VOQlowbERRV2RKUTBGblNVTlphbVZFVGtSUE1teDBXbmxDZW1OdFRUbEthVTQwVFdwSk4xY3hkREJoTTFKbVl6Sk9lbGd5UmpCa1IwWnFZVWN4YkdKdVVuQmlWMFp1V2xOQ2NHUkhWblJRVTFscVpVUkpNMDk1V1dwbFJFa3pUM2xDTVdOdGR6bEthVTQwVFdwak4wcHBUalJOYW1NM1NVaE9iMkl6WXpsS2FVNDBUV3BqTjFwdFZtaGtTRlo1V2xkU1ptRlhNV2hhTWxWdFNUTm5lVTU2YzJkak1tdzJXbFF3YlVrelozbE9lblIwV2xkU2NHUlhNRzFKTTJkNVRucHpaMkZYVG5aaWFqQnRTVE5uZVU1NmMyMUpNMmQ1VG5weloxcHRiSE5rUjFaNVVGTlphbVZFU1ROUE0wcG9aSGxaYW1WRVNUTlBlVUo2V1ZjMWNHUkhiRFphVkRCdFNUTm5lVTU2ZERGamJYaG1ZMjFHTTBwcFRqUk5hbU0zV0ZZd2JVa3paM2xOYW5ObldUSjRhR016VFRsS2FVNDBUV3BKTjFreVJubGFRekZ3WWxkamRHUkhPWGRLYVU0MFRXcEpOMGxIUm5Oa1JEQnRTVE5uZVUxcWRHSlhNMUp5WkVZNWVsa3pUbVpqUnpsNlpFZHNkVnB0T0dkaFdGSnNZbFF3YlVrelozbE9lbk50U1RObmVVNTZjMmRqTW1oMlpIb3diVWt6WjNsT2VuUjNZak5PTUZnelVuQmtSM2hzU21sT05FMXFZemRKUjFwd1lraFNiR05xTUcxSk0yZDVUbnAwZVZsWVkyMUpNMmQ1VG5weloyTXlSblZoV0ZKd1pXMVZPVXBwVGpSTmFtTTNaRWRXTkdSR09XMWhWMVp6V2tOWmFtVkVTVE5QTVRGa1NtbE9ORTFxU1RkS2FVNDBUVEJWTjBSUmIyZEpRMEZuU1VOQlowbERRV2RKUTBGdFNUTm5lbEY2ZEd0aFdGbG5XVEo0YUdNelRUbEthVTQwVFdwSk4xa3lSbmxhUXpGcFlqSlNOVXBwVGpSTmFrazNTbWxPTkUwd1ZUZEVVVzluU1VOQlowbERRV2RKUTBGblNVTkJaMGxEUVdkS2FVNDBUVEJOTjJGRVZXZFpNbmhvWXpOTk9VcHBUalJOYWtrM1dUSkdlVnBETVRCaFdGSnpXbE5aYW1WRVNYbFBlVmxxWlVST1JrOHhkR0prUjNRd1dETk9hbU14T1hkaU0wNHdZVmMxYldKNVFuQmtSMVowVUZOWmFtVkVTWGxQZVZscVpVUkplVTk1UW5waFJ6a3pVRk5aYW1WRVNYbFBNMEoyWXpOU1ptUkhiREJpUjFWdFNUTm5lVTFxYzJkYWJXeHpaRWRXZVZCVFdXcGxSRWw1VHpOS2FHUjVXV3BsUkVsNVQzbENlbGxYTlhCa1IydzJXbFF3YlVrelozbE5hblF3V2xob01GZ3lXbkJhVjNoclNtbE9ORTFxU1RkWVZqQnRTVE5uZWxGNmMzWmhSRlZ0U1RObmVsSlVjMDVEYVVGblNVTkJaMGxEUVdkSlEwRm5TVU5CWjBsRFFXMUpNMmQ2VVhwMGQwbEhUbk5aV0U1NlVGTlphbVZFU1hsUE1rNW9ZMjFSZEdSSFZqUmtRMWxxWlVSSmVVOTVXV3BsUkU1R1R6RjBZbVJIZERCWU0wNXFZekU1ZDJJelRqQmhWelZ0WW5sQ2NHUkhWblJRVTFscVpVUkplVTk1V1dwbFJFbDVUM2xDZW1GSE9UTlFVMWxxWlVSSmVVOHpRblpqTTFKbVdsaG9hbHBZU25ka1ExbHFaVVJKZVU5NVFtMWhWM2d3V2xoSk9VcHBUalJOYWtrM1kyMUdNMHBwVGpSTmFrazNTVWhPYUdKdGJEQmhXSEJzVUZOWmFtVkVTWGxQTTFKc1pVaFNabHB0Ykd4aVIxRnRTVE5uZVUxcWRHUllVMWxxWlVST1JFOTVPWGRLYVU0MFRUQlZOMFJSYjJkSlEwRm5TVU5CWjBsRFFXZEpRMEZ0U1RObmVsRjZjM1phUjJ3eVNtbE9ORTB3VlRkRVVXOW5TVU5CWjBsRFFXZEpRMEZuU1VOQmJVa3paM3BSZW5ScllWaFpaMWt5ZUdoak0wMDVTbWxPTkUxcVNUZFpNa1o1V2tNeGJXSXlPVEJhV0VsdFNUTm5lVTFxYzIxSk0yZDZVbFJ6VGtOcFFXZEpRMEZuU1VOQlowbERRV2RKUTBGblNVTkJiVWt6WjNwUmVuUjZZbGRHYzJKRFFtcGlSMFo2WTNvd2JVa3paM2xOYW5Rd1dsaG9NRXhYTVRGa1IxWnJTbWxPTkUxcVNUZEthVTQwVFRCVk4wcHBUalJOTUUwM1dWTkNhbUpIUm5wamVqQnRTVE5uZVUxcWRHbGtSelJuV1c1U2RVeFlUblJKUjBvd1lta3hNR0V6VVcxSk0yZDVUV3B6WjJGSVNteGFhakJ0U1RObmVVMXFkR0pYTTFKeVpFWTVlbGt6VG1aalJ6bDZaRWRzZFZwdE9HZGhXRkpzWWxRd2JVa3paM2xPZW5OdFNUTm5lVTU2YzJkak1taDJaSG93YlVrelozbE9lblJ1WkZkc2EwcHBUalJOYW1NM1NVZGFjR0pJVW14amFqQnRTVE5uZVU1NmRIbFpXR050U1RObmVVNTZjMmRqTWtaMVlWaFNjR1Z0VlRsS2FVNDBUV3BqTjJSWVNuTllNMHBvWkhsWmFtVkVTVE5QTVRGa1NtbE9ORTFxU1RkS2FVNDBUVEJWTjFWdFZtaGFRMEpPWWpOS2JFcHBUalJOTUUwM1RESkZiVWt6WjNwU1ZITnRTVE5uZWxGNmMzWmpNakZvWWtkM2JVa3paM3BTVkhOT1EybEJaMGxEUVdkSlEwRm5TVU5CWjBsRFdXcGxSRTVFVDNrNWEyRllXVzFKTTJkNlVsUnpUa05wUVdkSlEwRm5TVU5CWjBwcFRqUk5NRTAzVERKU2NHUnBXV3BsUkU1R1QzY3dTMGxEUVdkSlExbHFaVVJPUkU5NU9XdGhXRmx0U1RObmVsSlVjMDVEYVVGblNVTkNZZz09[/tkt_scs_loop]
    <div class="row">
        <div class="col pt-3">
            [tkt_scs_pagination instance="blog_posts" pag_arg="step" show_all="true" end_size="1" mid_size="2" prev_next="true" prev_text="Pre" next_text="Next" type="list" before_page_number="" after_page_number="" aria_current="page" ul_classes="pagination" li_classes="test" a_classes="page-link" current_classes="active page-link" container="div" containerclasses="d-flex pagination-container justify-content-center " add_args="" add_fragment=""]
        </div>
    </div>
</div>