Autosuggest - RX

by yshayy

HTML

<body>
    <div id="display"></div>
    <div id="console" style="background-color:#ffffff;border: 1px solid black;position:fixed; bottom:0; height: 200px; left:0;right:0;overflow:scroll"></div>
    <input id="search" placeholder="enter your favorite movie" />
    <div id="movies"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.11/rx.all.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.js"></script>
    <script>
        var $console = {
            log: function(x) {
                var log = document.createElement("div");
                log.textContent += x;
                document.querySelector("#console").appendChild(log);
            }
        }

            function $display(x) {
                document.querySelector("#display").textContent = x;
            }

            function queryMovie(query) {
                $console.log("requested request for " + query);
                return $.get(
                    'http://api.themoviedb.org/3/search/movie?api_key=9eae05e667b4d5d9fbb75d27622347fe&query=' + query).then(function(r) {
                    $console.log("received " + r.results.length + " results for " + query);
                    return r.results
                });
            }


            function updateMovies(results) {
                $("#movies").html(results.map(function(movie)
        {
        return "<div>(" + movie.release_date.substring(0,4)  + ") - " + movie.original_title + "</div>"
        }));
            }
    </script>
</body>

CoffeeScript

$("#search")
.onAsObservable("keyup change")
.select( (ev) -> $(ev.target).val())
.where( (query) -> query.length > 2)
.subscribe((query) -> queryMovie(query).then(updateMovies))

###
$("#search").on("keyup change", (ev)->
                   query = $(ev.target).val()
				   return if query.length < 3
				   queryMovie(query).then(updateMovies)
				)
###