在我的 MVC 应用程序中,我使用自动完成功能来填写一些输入框。 在我的一个观点中,这很好用。 但是在模态弹出窗口中它不起作用。进行了 ajax 调用以从数据库中获取列表,但该列表未出现在搜索框下方。
从这里调用弹出窗口;
<a class="btn btn-info btn-xxs get-tender"
href="#edit-tender-form"
data-toggle="modal"
data-tac-tender-url="/Tender/Get"
data-tac-tender-status="2,Unsuccessful"
data-tac-tender-id="5">Edit</a>
在edit-tender-form中,搜索输入框
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">10 results are available, use up and down arrow keys to navigate.</span>
<input style="width: 300px;" id="searchTerm" class="input-validation-error" name="searchTerm" type="search" data-tac-autocomplete="/Company/AutocompleteCompany" autocomplete="off">
以下 javascript 为所有包含 data-tac-autocomplete 属性的输入搜索框连接了自动完成;
var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-tac-autocomplete"),
select: updateAutocompleteForm,
close: errorAutocompleteForm
};
$(".errorNotSelected").hide();
$input.autocomplete(options);
};
$("input[data-tac-autocomplete]").each(createAutocomplete);
服务器代码上的断点显示这按预期工作;
[Authorize]
public ActionResult AutocompleteCompany(string term)
{
var companyTypeId = this.GetCompanyTypeId();
var model =
this.TacUoW.GetCompanyAutocomplete(term, companyTypeId).Take(10).Select(
x => new
{
label = string.Format("{0} - {1}", x.Company, x.Trade),
id = x.CompanyId
});
return this.Json(model, JsonRequestBehavior.AllowGet);
}
那为什么我在自动补全输入框下看不到自动补全的公司列表呢?
最佳答案
它可能在模态后面。
var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-tac-autocomplete"),
select: updateAutocompleteForm,
close: errorAutocompleteForm,
appendTo: $("#edit-tender-form")
};
$(".errorNotSelected").hide();
$input.autocomplete(options);
};
appendTo 会将其附加到表单,如果这不起作用,请尝试将其添加到模态元素
关于javascript - 模态弹出窗口的自动完成功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25178890/