Autocomplete
Meal:
Autocomplete needs an url, controller or data function (js func) to get data from, by default convention it
will look for a controller with the same name as it + "Autocomplete"
-
action GetItems
- gets the items for the autocomplete, it will receive av
parameter which represents the value of the textbox
AutocompleteDemo/Index.cshtml
Meal: @(Html.Awe().Autocomplete(new AutocompleteOpt
{
Name = "Meal1",
Url = Url.Action("MealAutocomplete", "Data"),
Placeholder = "try o.."
}))
Awesome/DataController.cs
public IActionResult MealAutocomplete(string v = "") // v is the entered text
{
v = v.Trim();
var items = Db.Meals.AsQueryable()
.Filter(v, o => o.Name)
.Take(10)
.ToArray();
return Json(items.Select(o => new KeyContent(o.Id, o.Name)));
}
Custom Item rendering
Meal:
Achieving custom item rendering by setting
ItemFunc
,
we're reusing the site.imgItem used by the imgDropdown but any js function that receives an object (KeyContent inheritant MealDisplay) and returns a string will do.
AutocompleteDemo/Index.cshtml
Meal:
@(Html.Awe().Autocomplete(new AutocompleteOpt
{
Name = "MealImgIt",
ItemFunc = "site.imgItem",
Url = Url.Action("GetMealsImgAutoc", "Data"),
Placeholder = "try o"
}))
Awesome/DataController.cs
public IActionResult GetMealsImgAutoc(string v)
{
v = (v ?? string.Empty);
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Where(o => o.Name.Contains(v))
.Select(o => new MealDisplay(o.Id, o.Name, url + o.ImageName));
return Json(items);
}
Storing selected value key in a separate field using .PropId
Meal:
Key:
you can (should) use hidden input instead
when the user selects a value from the autocomplete lists the PropId will be assigned the key of the selected value,
but if the user will type something into the autocomlete after that the propId value will clear
AutocompleteDemo/Index.cshtml
<div class="efield">
<div class="elabel">
Meal:
</div>
@(Html.Awe().Autocomplete(new AutocompleteOpt
{
Name = "Meal3",
PropId = "MealKey",
Url = Url.Action("MealAutocomplete", "Data")
}))
</div>
<div class="efield">
<div class="elabel">Key:</div>
@Html.Awe().TextBoxFor(o => o.MealKey)
<div class="awe-il">you can (should) use hidden input instead</div>
</div>
Using DataFunc and ItemFunc
git repo:
using
DataFunc
to get data from github api, ItemFunc
is used to set a custom js function that will render the item
AutocompleteDemo/Index.cshtml
git repo:
@(Html.Awe().Autocomplete(new AutocompleteOpt{
Name = "Repo",
DataFunc = "getGit",
ItemFunc = "gitItem"
}))
<script>
function getGit(v) {
return $.get('https://api.github.com/search/repositories', { q: v })
.then(function (data) {
return $.map(data.items,
function (item) {
return { k: item.id, c: item.full_name, avatar: item.owner.avatar_url, desc: item.description };
});
});
}
function gitItem(item) {
const avatarUrl = `${awef.encode(item.avatar)}&s=40`;
return `<div class="content">
<div class="title">
${awef.encode(item.c)}
<img class="thumb" src="${avatarUrl}" />
</div>
${item.desc ? `<p class="desc">${awef.encode(item.desc)}</p>` : ""}
</div>`;
}
</script>
Numeric autocomplete
Prime number:
AutocompleteDemo/Index.cshtml
@(Html.Awe().Autocomplete(new AutocompleteOpt
{
Name = "PrimeNumber",
Url = Url.Action("GetItems", "PrimesAutocomplete"),
Numeric = true,
Placeholder = "type a prime number"
}))
Comments