0

我从要点中获取了此代码的基础。fetch()当我第一次编辑集合然后render()调用 tw-bootstap's时，它最初工作得很好.typeahead()。

但是，我已经设置了一个keypress事件来尝试限制fetch(). 采集数据返回，经过prepData()精细过滤后到达render(). 预输入不起作用，但是在那个阶段。可能是主干事件在那个时候覆盖了渲染？

// typeahead on the numbers
var Bootstrap = {};

Bootstrap.Typeahead = Backbone.View.extend({
    el: '#autocompleteN',
    tagName: 'input',
    attributes: {"data-provide": "typeahead"},
    initialize: function(options){
        if(!this.collection) {
            return null;
        }

        //this.collection.on("reset", this.prepData, this);
    },
    events: {
        "keypress": "setSearch"
    },

    setSearch: _.throttle(function(e) {
        var that=this;
        var d = e.currentTarget.value;

        // strip spaces and remove non-numerics
        d = d.replace(/ /g,'');
        d = d.replace(/[^0-9]/g, '');

        // if it's longer than 2, call a fetch;
        if(d.length > 2) {
            $.when( app.searchNums.fetch({url: 'api/index.php/search/num/'+d}) ).then(function() { 
                //console.dir("success");
                that.prepData();
            });
        }

    }, 1000),
    prepData: function() {
        //console.dir("prepData called");
        var prepare = _.pluck(this.collection.models, 'attributes');
        this.property = this.options.property || _.keys(prepare[0])[0];

        this.items = this.options.items;
        this.data = _.pluck(prepare, this.property);

        this.render();
    },
    render: function() {
        var that = this;
        that.$el.typeahead({
            source: that.data,
            //source: ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'],
            items: that.items,
            onselect: function( data ) {  
                // render the results view here
            }
        });

        return this;
    }
});

var bui = new Bootstrap.Typeahead({
    collection: app.searchNums,
    items: 5
});
4

1 回答 1

0

你为什么不直接设置minLength预输入，看起来这就是你想要做的？

于 2013-03-27T12:23:05.620 回答