typeahead

对于输入一次调用一下后台的接口,将数据显示出来。之前觉得它特别的困难,其实确实也非常困难,但是我们有插件呀,插件呀。其实之前就貌似写过自动补全的一个东西,但是要想使用一个插件,你得明确问题的点在哪里呀,你得知道自己要干啥呀。
对于上述问题最直接的点是我的search和source,search就是我输入的东西,可以监听到我输入框的变化。source是从后台返回的数据,可以实时的进行数据的更新。
嗯 但是到底怎么用,并不是很清楚。来一段code,
$('#remoteId.typeahead').typeahead(null, {
display: 'chinese_name',
templates:{
suggestion: Handlebars.compile('

{{chinese_name}} – {{english_name}}
')
},
async:true,
source: function(query,cb_sync,cb_async){

        Service.filterForStudents(query).success(function(students, status, headers, config){
        if(students){
            cb_async(students)
        }
    }).error(function(data, status, headers, config){
        AlertService.serviceError();
    })          
    }
})
.bind('typeahead:select',function(e, suggestion){
    $scope.condition.student_id = suggestion.sid
}); 

其中query代表的是search吧,可以监听到input框的变化,从而可以向后台传递数据。另外两个参数一个是同步监听数据,另外一个是异步监听数据,cb _async就可以进行数据的同步了呢。。
通过.bind('typeahead:select',function(e, suggestion){
$scope.condition.student_id = suggestion.sid
}); 就可以获得同步的数据了呢,suggestion就是你选中的数据对象。
大体的用法就是这个样子的,需要再使用的时候可以再进行研究一下。。要会使用插件,嗯,你得需要看它的文档呀。。

你可能感兴趣的:(typeahead)