模式弹出窗口上的自动完成功能不起作用答案

【问题标题】：Autocomplete on modal popup not working模式弹出窗口上的自动完成功能不起作用
【发布时间】：2014-09-30 11:32:27
【问题描述】：

在我的 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);
}

那么为什么我在自动完成输入框下看不到自动完成的公司列表呢？

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-ui autocomplete

【解决方案1】：

它可能在模态后面。

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 会将其附加到表单中，如果这不起作用，请尝试将其添加到模态元素中

【讨论】：

好极了，看起来很明显，但我没有想到。