Ext.onReady(function(){

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'http://www.smartmedtravel.com/ancillary/ajax_search.php?r=891'
        }),
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'count',
            id: 'city_id'
        }, [
           {name: 'bgcolor'},
           {name: 'city_name'},
           {name: 'd_id'},
           {name: 'name'},
           {name: 'the_html_name'}
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item" style="background-color: {bgcolor}; border-bottom: 1px dotted green; padding: 5px; text-align: left;">',
            '{the_html_name}',
        '</div></tpl>'
    );
    
    var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'name',
        typeAhead: false,
        loadingText: 'Searching...',
        minChars: 2,
        width: 321,
        hideTrigger:true,
        queryDelay: 200,
        selectOnFocus: true,
        tpl: resultTpl,
        applyTo: 'dynamic_search',
        itemSelector: 'div.search-item',
        onSelect: function(record){ // override default onSelect to do redirect
            append_html('search_message_box', record.data.city_name);
            show_hide('search_message_box');
            window.location =
                String.format('http://www.smartmedtravel.com/city.php?city_id={0}&d={1}', record.id, record.data.d_id);
        }
    });

    element_id = get_ref_to_id('dynamic_search');
    element_id.focus();
});