为一个领域工作但不为另一个领域工作
typeahead working for one field but not the other
我有一个包含 2 个输入字段的表单,我希望为两者提供自动完成功能,但来源不同。虽然两者的代码基本相同,但它仅适用于一个领域(客户)。如果我使用 postman 手动查询 API,我会按预期获得数据。
这是表格
@model dynamic
@{
ViewBag.Title = "New Rental Form";
}
<h2>New Rental Form</h2>
<form>
<div class="form-group">
<label>Customer</label>
<input id="customer" type="text" value="" class="form-control" />
</div>
<div class="form-group">
<label>Movie</label>
<input id="movie" type="text" value="" class="form-control" />
</div>
<button class="btn btn-primary">Submit</button>
</form>
@section scripts
{
<script>
$(document).ready(function () {
var vm = {};
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: 'movie',
display: 'name',
source: movies
});
})
</script>
}
它仅适用于 'Customer' 字段。同样在 Visual Studio 中,我可以看到查询已完成。所以也许问题是解析 API 结果?我不知道...
问题是被调用的 API 并没有真正过滤列表。它总是返回完整的电影列表。如果结果太多,typeahead
似乎不会显示选择。所以我所要做的就是实现接收 %QUERY
值的参数并实际过滤列表。
public IEnumerable<MovieDto> GetMovies(string query = null)
{
var moviesQuery = _context.Movies
.Include(m => m.Genre)
.Where(m => m.AmmountAvailable > 0);
if (!string.IsNullOrWhiteSpace(query))
moviesQuery = moviesQuery.Where(m => m.Name.Contains(query));
return moviesQuery
.ToList()
.Select(Mapper.Map<Movie, MovieDto>);
}
我有一个包含 2 个输入字段的表单,我希望为两者提供自动完成功能,但来源不同。虽然两者的代码基本相同,但它仅适用于一个领域(客户)。如果我使用 postman 手动查询 API,我会按预期获得数据。
这是表格
@model dynamic
@{
ViewBag.Title = "New Rental Form";
}
<h2>New Rental Form</h2>
<form>
<div class="form-group">
<label>Customer</label>
<input id="customer" type="text" value="" class="form-control" />
</div>
<div class="form-group">
<label>Movie</label>
<input id="movie" type="text" value="" class="form-control" />
</div>
<button class="btn btn-primary">Submit</button>
</form>
@section scripts
{
<script>
$(document).ready(function () {
var vm = {};
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: 'movie',
display: 'name',
source: movies
});
})
</script>
}
它仅适用于 'Customer' 字段。同样在 Visual Studio 中,我可以看到查询已完成。所以也许问题是解析 API 结果?我不知道...
问题是被调用的 API 并没有真正过滤列表。它总是返回完整的电影列表。如果结果太多,typeahead
似乎不会显示选择。所以我所要做的就是实现接收 %QUERY
值的参数并实际过滤列表。
public IEnumerable<MovieDto> GetMovies(string query = null)
{
var moviesQuery = _context.Movies
.Include(m => m.Genre)
.Where(m => m.AmmountAvailable > 0);
if (!string.IsNullOrWhiteSpace(query))
moviesQuery = moviesQuery.Where(m => m.Name.Contains(query));
return moviesQuery
.ToList()
.Select(Mapper.Map<Movie, MovieDto>);
}