QuickSearch

The QuickSearch is not Wordpress widget, it is internal theme stuff; made as easy as possible. As in other places I have started with breaking Wordpress’ template hierarchy: I have created new template file called “json_data.php”. The template is meant to output JSON. If there is no json php extension on the server it uses HTML_AJAX_JSON class taken from PEAR’s HTML_AJAX package. To be honest I did not look into HTML_AJAX_JSON very closely. I have checked the license of the package and I have checked it works exactly as I needed; that is all.

<?php
if(!function_exists(‘get_option’))
  require_once(‘../../../wp-config.php’);
 
$out = array();
if (have_posts()) {
    while (have_posts()) {
        the_post();
        $id = get_the_ID();
        $out[] = array(
            ‘id’        => $id,
            ‘title’     => get_the_title($id),
            ‘content’   => substr(strip_tags(get_the_content()), 0, 128)."…",
            ‘author’    => get_the_author(),
        );
    }
} else {
        $out[] = array(
            ‘id’        => 0,
            ‘title’     => ‘Not found.’,
            ‘content’   => "Sorry, no posts matched your criteria….",
            ‘author’    => ‘Administrator’,
        );
}
 
 
if (!extension_loaded(‘json’)) {
    require_once(‘JSON.php’);
    $json = new HTML_AJAX_JSON();
    echo $json->encode(array(‘result’ => $out));
} else {
    echo json_encode(array(‘result’ => $out));
}
 ?>

Then on theme.js I have put the following:

<script>
. . .
setupLiveSearch: function() {
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: Wp.bloginfo.url + ‘?jsonData=true’
        }),
        reader: new Ext.data.JsonReader({
            root: ‘result’,
            id: ‘id’
        }, [
            {name: ‘title’, mapping: ‘title’},
            {name: ‘id’, mapping: ‘id’},
            {name: ‘author’, mapping: ‘author’},
            {name: ‘content’, mapping: ‘content’}
        ])
    });
 
    var resultTpl = new Ext.Template(
        ‘<div class="search-item">’,
            ‘<h4>{title}<br /></h4>’,
            ‘{content}’,
        ‘</div>’
    );
    var search = new Ext.form.ComboBox({
        store: ds,
        minChars: 2,
        displayField:‘title’,
       	queryParam:’s’,
        tpl: resultTpl,
        onSelect: function(record){ // override default onSelect to do redirect
            this.loadPosts(Wp.bloginfo.url + ‘?p=’ + record.id);
        }.createDelegate(this)
    });
    // apply it to the exsting input element
    search.applyTo(‘liveseach’);
 
}
. . .
</script>

It works exactly as I wanted it to work, but if you have a better idea of quicksearch behavior please let me know.