In my MVC application I used autoplete to fill in some of the input boxes. This works fine in one of my views. But in a modal popup it does not work. Aa ajax call is made to get the list from the database, but the list does not appear underneath the search box.

The popup is called from here;

<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>

In edit-tender-form, the search input box

<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-autoplete="/Company/AutopleteCompany" autoplete="off">

The following javascript hooks up the autoplete for all input search boxes that contains the data-tac-autoplete attribute;

var createAutoplete = function () {
    var $input = $(this);
    var options = {
        source: $input.attr("data-tac-autoplete"),
        select: updateAutopleteForm,
        close: errorAutopleteForm
    };
    $(".errorNotSelected").hide();
    $input.autoplete(options);
};

$("input[data-tac-autoplete]").each(createAutoplete);

Breakpoints on the server code shows that this works as expected;

[Authorize]
public ActionResult AutopleteCompany(string term)
{
    var panyTypeId = this.GetCompanyTypeId();

    var model =
        this.TacUoW.GetCompanyAutoplete(term, panyTypeId).Take(10).Select(
            x => new
            {
                label = string.Format("{0} - {1}", x.Company, x.Trade),
                id = x.CompanyId
            });
    return this.Json(model, JsonRequestBehavior.AllowGet);
}

So why can I not see the list of panies from autoplete under the autoplete input box?

In my MVC application I used autoplete to fill in some of the input boxes. This works fine in one of my views. But in a modal popup it does not work. Aa ajax call is made to get the list from the database, but the list does not appear underneath the search box.

The popup is called from here;

<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>

In edit-tender-form, the search input box

<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-autoplete="/Company/AutopleteCompany" autoplete="off">

The following javascript hooks up the autoplete for all input search boxes that contains the data-tac-autoplete attribute;

var createAutoplete = function () {
    var $input = $(this);
    var options = {
        source: $input.attr("data-tac-autoplete"),
        select: updateAutopleteForm,
        close: errorAutopleteForm
    };
    $(".errorNotSelected").hide();
    $input.autoplete(options);
};

$("input[data-tac-autoplete]").each(createAutoplete);

Breakpoints on the server code shows that this works as expected;

[Authorize]
public ActionResult AutopleteCompany(string term)
{
    var panyTypeId = this.GetCompanyTypeId();

    var model =
        this.TacUoW.GetCompanyAutoplete(term, panyTypeId).Take(10).Select(
            x => new
            {
                label = string.Format("{0} - {1}", x.Company, x.Trade),
                id = x.CompanyId
            });
    return this.Json(model, JsonRequestBehavior.AllowGet);
}

So why can I not see the list of panies from autoplete under the autoplete input box?

• javascript
• jquery
• asp-mvc
• jquery-ui
• autoplete

1 Answer 1

It's probably behind the modal.

var createAutoplete = function () {
var $input = $(this);
var options = {
    source: $input.attr("data-tac-autoplete"),
    select: updateAutopleteForm,
    close: errorAutopleteForm,
    appendTo: $("#edit-tender-form")
};
$(".errorNotSelected").hide();
$input.autoplete(options);
};

The appendTo will attach it to the form, if that doesn't work, try adding it to the modal element