/*
 * Ext JS Library 1.1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://www.mymasterynetwork.com/eng/school_suggestion.php'
        }),
       reader: new Ext.data.JsonReader({
            root: 'schools',
            totalProperty: 'totalcount',
            id: 'schid'
        }, [
            {name: 'name', mapping: 'name'},
			{name: 'schid', mapping: 'schid'},
			{name: 'did', mapping: 'did'},
			{name: 'address', mapping: 'address'},
			{name: 'city', mapping: 'city'},
			{name: 'country', mapping: 'country'}
          
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.Template(
        '<div class="search-item">',
            '<h3>{name}</h3><br />School ID: {schid}<br/>',
			'{address},{city},{country}',
        '</div>'
    );
    
    var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'name',
        typeAhead: false,
        loadingText: 'Searching...',
        width: 210,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl,
        onSelect: function(record){ // override default onSelect to do redirect
            
        }
    });
    // apply it to the exsting input element
    search.applyTo('search');
});