October 9th, 2007 by W.Regenczuk

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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.

Pages: 1 2 3 4 5 6 7 8 9
7 Responses to “Ext JS Theme Revealed”
Nico says:

Testing theme =)

Great app

testando says:

testando, m testando, m testando, m testando, m

Khashayar says:

well done

Me says:

good!

bywide says:

nice … O_O

Trojan, says:

hello! i like this themes, but i can’t install.why ? pls help me!