将远程数据库与Backbone自动完成脚本一起使用

时间:2014-10-20 20:44:02

标签: jquery backbone.js

我想使用此page上的脚本作为自动完成功能。解释非常清楚,并且它正在使用我自己的数据库,目前我正在从我自己的数据库中提取电影标题。但我想要实现的是TMDB(或其他)数据库中的电影片段列表。

TMDB api的电影搜索网址是http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=star+wars,其中star + wars是输入字段的值。

有人可以解释或举例说明我将如何实现这一目标吗?

%h1 Find Users
%form{:action => "find", :method => "get"}
  %input#movie-input{:placeholder => "Enter Name", :type => "text"}/
#movie-selection{:style => "margin-top:10px;"}

:javascript
  $(function() {

    var MovieList = Backbone.Collection.extend({ //Line 11
      url: '/api/movies.json',
      parse: function(response) {
        return response;
      }
    });

    var movies = new MovieList(); //Line 26
    movies.fetch({async: false});
    var movieNames = movies.pluck("title");

    $("#movie-input").autocomplete({ //Line 30
      source : movieNames,
      minLength : 2
    });
  });

1 个答案:

答案 0 :(得分:2)

刚刚创建了一个有问题的API的工作小提琴: http://jsfiddle.net/nitincool4urchat/dxpowx27/2/

为了完成,这是它的样子:

var MoviesCollection = Backbone.Collection.extend({
    url:function(){
        return "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query="+this.query;
    },
    parse:function(response){
        return response.results;
    },
    setQuery:function(query){
        this.query=encodeURIComponent(query);
    }
});

var myCollection = new MoviesCollection();
myCollection.setQuery('star wars');

myCollection.fetch().done(function(){
    alert('fetch complete : '+myCollection.length);
    //$("#search_container").html(JSON.stringify(myCollection.toJSON()));
});