AJAX-powered Headway search block – 02

I’ve outlined, in a previous post, the features of an Headway themes block plugin allowing a theme developer to supply his users with an AJAX-powered search block.

The core

The whole plugin revolves around the “ajaxification” of a standard WordPress search form using the jQuery ajaxify plugin. The plugin can “ajaxify” the standard WordPress search form with as little code as

jQuery(document).ready(function($) {

    $('form.searchform').ajaxifySubmit();

    });
});

While that won’t be the case in the block this is the working principle.

The theme developer settings

Since so much of the block revolves around the jQuery plugin much of the settings it offers are really an emergence of its interface into Headway and the interminable list of nested arrays in the ajaxsearch\BlockOptions class will yield an interface like the one below [caption id=“attachment_959” align=“aligncenter” width=“1024”] AJAX search block settings[/caption]

The markup

Following along the line drawn using the block plugin grunt-init template I will use the the ajaxsearch\Block::init_action method to add HTML 5 theme support for the search form generation

public static function init_action($block_id, $block) 
{
    // maybe add HTML5 search form support
    // check the setting for the HTML5 search form
    $enable5 = Settings::on($block)->enableHtml5;
    if ($enable5) {
        ThemeSupport::addSupport('html5', array('search-form'));
    }
}

Settings is an alias of the BlockSettings class while ThemeSupport is an alias of the ThemeSupport class. Both classes are utility classes I’ve created to make my work shorter. The setting that’s checked here is the one that’s presented to the theme developer on the block settings here [caption id=“attachment_960” align=“aligncenter” width=“1024”] HTML 5 support[/caption] Latter, in the ajaxsearch\Block::content method, the method Headway will call to present a block content, the markup is echoed to the page

public function content($block) {

    // deactivate Headway Widget filter to avoid inline JS events
    remove_filter('get_search_form', array('HeadwayWidgets', 'search_form'), 10);

    // add a filter to append a custom data to this specific search form
    $id = $block['id'];
    $f = function($form) use($id) {
        if(!$id) {
            return;
        }
        $rep = sprintf('$1 data-block-id="%d"', $id);
        return preg_replace("/(<form)/uis", $rep, $form);
    };
    add_filter('get_search_form', $f);

    // output to the page 
    get_search_form();

    // restore the original filter after the page output
    remove_filter( 'get_search_form', $f );
    add_filter('get_search_form', array('HeadwayWidgets', 'search_form'), 10);
}

I’ve removed the Headway filter to remove the onClick and onBlur event handlers Headway would append inline to the generated search form markup and appended a data-block-id attribute to the markup to be able to target it specifically later. The markup produced on the page is like

<form data-block-id="6" role="search" method="get" id="searchform" class="searchform" action="http://testing.dev/">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s">
        <input type="submit" id="searchsubmit" value="Search">
    </div>
</form>

Next

I will post the complete block on GitHub and will document its inner workings from this point on.