MVC5 中的自动完成下拉菜单? [英] Autocomplete dropdown in MVC5?
问题描述
我认为只有一个领域.该字段是客户,它是一个下拉字段.因为我保留下拉列表作为选择选项来选择值.但我喜欢将该字段更改为自动完成下拉列表.
Hi i have one field in my view. That field is Customer it is a dropdown field. In that i have keep dropdown as select option to select the value. But i like to change that field as Autocomplete dropdown.
在上图中,我有 customerName 字段作为下拉字段,但我通过搜索和选择选项保留它.但现在我想将其更改为自动完成下拉菜单,如下图所示.
In the above image I have customerName field as dropdown field but i keep it by search and select option. But now i like to change this to autocomplete dropdown like which is mention the in the below image.
我的视图代码
@Html.Label("Customer Name", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })
我的 jquery 代码
$(function () {
debugger;
$.ajax(
'@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })',{
type: "GET",
datatype: "Json",
success: function (data) {
$.each(data, function (index, value) {
$('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
});
}
});
});
我的控制器代码,用于获取客户并在现场加载
public JsonResult GetVisitCustomer()
{
var objCustomerlist = (from c in db.Customers where c.IsDeleted== false select c).ToList();
return Json( objCustomerlist,JsonRequestBehavior.AllowGet);
}
我试图解释我的问题.任何人都可以帮助解决此问题.我尝试了很多方法,但它不起作用.所以任何人都了解我的问题并提供一些解决方案或建议.
I tried to explain my issue. Any one help to resolve this issue. I tried many ways but its not working. So any one understand my issue and give some solution or suggesstions.
我尝试过的代码
我的查看代码
@Html.Label("Customer Name", new { @class = "control-label" })
@Html.TextBoxFor(Model=>Model.CustomerID)
我的 Jquery 代码
My Jquery Code
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#CustomerID").autocomplete({
source: function (request, response) {
$.ajax(
'@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })', {
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return
{ label=item.CustomerID, value= item.DisplayName
};
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
</script>
但是这段代码不起作用
先谢谢...
推荐答案
请看下面的代码:
HTML
@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control"})
@Html.HiddenFor(model => Model.CustomerID)
JS
$(document).ready(function () {
$("#CustomerName").autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetVisitCustomer", "Home")',
datatype: "json",
data: {
Areas: 'Sales',
term: request.term
},
success: function (data) {
response($.map(data, function (val, item) {
return {
label: val.Name,
value: val.Name,
customerId: val.ID
}
}))
}
})
},
select: function (event, ui) {
$("#CustomerID").val(ui.item.customerId);
}
});
});
代码
public JsonResult GetVisitCustomer(string Areas, string term = "")
{
var objCustomerlist = db.Customers.Where(c => c.IsDeleted == false)
.Where(c => c.CustomerName.ToUpper()
.Contains(term.ToUpper()))
.Select(c => new { Name = c.CustomerName, ID = c.CustomerID })
.Distinct().ToList();
return Json(objCustomerlist, JsonRequestBehavior.AllowGet);
}
示例截图
这篇关于MVC5 中的自动完成下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!