@{
ViewBag.Title = "New Rental Form";
}
<h2>New Rental Form</h2>
<form id="newRental">
<div class="form-group">
<label>Customer</label>
<div class="tt-container">
<input id="customer" type="text" value="" class="form-control" />
</div>
</div>
<div class="form-group">
<label>Movie</label>
<div class="tt-container">
<input id="movie" type="text" value="" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-1">
<ul id="movies" class="list-group"></ul>
</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>
@section scripts
{
<script>
$(document).ready(function () {
var vm = {
movieIds: []
};
var customers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/customers?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#customer').typeahead({
minLength: 3,
highlight: true
}, {
name: 'customers',
display: 'name',
source: customers
}).on("typeahead:select", function(e, customer) {
vm.customerId = customer.id;
});
var movies = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/movies?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#movie').typeahead({
minLength: 3,
highlight: true
}, {
name: 'movies',
display: 'name',
source: movies
}).on("typeahead:select", function (e, movie) {
$("#movies").append("<li class='list-group-item'>" + movie.name + "</li>");
$("#movie").typeahead("val", "");
vm.movieIds.push(movie.id);
});
$("#newRental").submit(function (e) {
e.preventDefault();
$.ajax({
url: "/api/newRentals",
method: "POST",
data: vm
})
.done(function() {
console.log("done");
})
.fail(function() {
});
});
});
</script>
}`