AutocompleteDemo.js

goog.provide('ZH.demo.AutoComplete');

goog.require('goog.style');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('ZH.ui.ac.entity');
goog.require('ZH.ui.ac.AutoComplete');
goog.require('ZH.ui.ac.RichRemoteArrayMatcher');
goog.require('ZH.ui.ac.RichInputHandler');
goog.require('ZH.ui.ac.Renderer');


ZH.demo.AutoComplete = {
    onUpdate: function(row){
        var entity = ZH.ui.ac.entity.parse(row['entity']);
        
        var kind = {
            'topic': '话题',
            'member': '用户',
            'question': '问题'
        }
        var result = goog.dom.getElement('selected_result');
        result.innerHTML = 'You have choosed: ' + kind[entity.kind];
        goog.style.showElement(result, true);
    },
    handleEvent: function(e){
        var $this = ZH.demo.AutoComplete;
        switch(e.type){
            case goog.ui.ac.AutoComplete.EventType.UPDATE:
                $this.onUpdate(e.row);
                break;
        }
    },
    getDefaultRow_: function(){
        return ZH.demo.AutoComplete.DEFAULT_ROWS;
    },
    rowFilter_: function(rows){
        return goog.array.filter(rows, function(row){
            var entity = row['entity'];
            if(!entity){
                return true; //info row.
            }
            return !(entity['kind'] === ZH.ui.ac.entity.EntityType.TOPIC 
                && entity['display_name'] === 'TopicToBeFiltered');
        });
    },
    init: function(){
        var input_ = goog.dom.getElement('ac-input');

        //ZH.ui.AutoComplete.createAutoComplete = function(url, opt_input, opt_parent
        var ac = ZH.ui.ac.AutoComplete.createAutoComplete('/static/js/test_data/ac1.js', input_);
        
        //Default rows assignment.
        ac.setDefaultMatchProvider(this.getDefaultRow_);
        //Rows fileter assignment.
        ac.setRowFilter(this.rowFilter_);
        
        var listenEvents = [
            goog.ui.ac.AutoComplete.EventType.UPDATE,
            goog.ui.ac.AutoComplete.EventType.ROW_HILITE,
            goog.ui.ac.AutoComplete.EventType.HILITE,
            goog.ui.ac.AutoComplete.EventType.SELECT
        ];

        goog.events.listen(ac, listenEvents, this);

        //Rowfilter and default values.
        var input2_ = goog.dom.getElement('ac-input2');
        var ac2 = ZH.ui.ac.AutoComplete.createAutoComplete('/static/js/test_data/ac2.js', input2_);
        ac2.setAutoHilite(false);

        //Vertical label.
        var input3_ = goog.dom.getElement('ac-input3');
        var ac3 = ZH.ui.ac.AutoComplete.createAutoComplete('/static/js/test_data/ac1.js', 
            input3_, goog.dom.getElement('ac-wrap3'));
        
    }
};

ZH.demo.AutoComplete.DEFAULT_ROWS = [
    {'unselectable':1, 'html':'<div class="ac-row-label"><button type="button" class="close">不是 <span>&times;</span></button>你是不是想找这些？</div>'},
    {
        'entity':{
            'kind': 'topic',
            'id': '123',
            'display_name': '美股',
            'url_token': '456',
            'avatar': 'http://p2.zhimg.com/b5/42/b542a673c_m.jpg'
        },
        'html':'<div class="ac-row"><a class="item-topic" href="http://www.zhihu.com/topic/19747151">美股</a><span class="muted">2733 个热门回答</span></div>'
    },
    {
        'entity':{
            'kind': 'topic',
            'id': '123',
            'display_name': '产品经理',
            'url_token': '456',
            'avatar': 'http://p2.zhimg.com/b5/42/b542a673c_m.jpg'
        },
        'html':'<div class="ac-row"><a class="item-topic" href="http://www.zhihu.com/topic/19551325">产品经理</a><span class="muted">2733 个热门回答</span></div>'
    },
    {
        'entity':{
            'kind': 'topic',
            'id': '123',
            'display_name': 'TopicToBeFiltered',
            'url_token': '456',
            'avatar': 'http://p2.zhimg.com/b5/42/b542a673c_m.jpg'
        },
        'html':'<div class="ac-row"><a class="item-topic">TopicToBeFiltered</a><span class="muted">2733 个热门回答</span></div>'
    }
];