JQuery UI Autocomplete-Widget funktioniert nicht auf einem Bootstrap-Modal

Question

Ich habe einen Bootstrap-modalen Dialog, auf dem ich ein Textfeld habe, dass ich die Funktionalität von jQuery UI Autocomplete-Widget nutzen möchte. Das Autocomplete-Widget wird jedoch überhaupt nicht ausgelöst. Ich weiß das, als ich einen Haltepunkt auf die Aktion auf meinem Controller legte, der das Json zurückgeben sollte, um von dem Autocomplete-Textfeld wiedergegeben zu werden. Die Aktion wird nie getroffen

Aus Neugier, dass ich etwas falsch gemacht habe, kopiere ich die Textbox auf eine Ansicht und zu meiner Bestürzung wird der Haltepunkt auf meiner Aktion im Controller getroffen. Ich habe dies auf die Tatsache beschränkt, dass die Textbox möglicherweise nie mit der Autocomplete-Funktion verbunden ist, sobald das DOM geladen wurde. Hier ist die Textbox auf meinem modal

<input type="text" name="someName" id="autocomplete" data-autocomplete-url="@Url.Action("Autocomplete", "warehouses")" /> 

Hier ist die Aktion-Methode, die die Json zurück

public ActionResult Autocomplete(string term) 
    { 
     string[] names = { "Auma", "Dennis", "Derrick", "Dylan", "Mary", "Martha", "Marie", "Milly", "Abel", "Maria", "Bergkamp", "Arsene", "Alex", "Mwaura", "Achieng" }; 
     var filtered = names.Where(a => a.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0); 
     return Json(filtered, JsonRequestBehavior.AllowGet); 
    } 

Und hier ist, wie ich die Textbox verdrahten, um das Autovervollständigen verwenden Widget

$(document).ready(function() { 
$('#autocomplete').autocomplete({ 
    source: $(this).data('autocomplete-url'), 
    data: {term: $(this).val() } 
}); 

});

Ich habe ähnliche Fragen gestellt, aber keine von ihnen wurde aufgrund der Aktion nicht getroffen.

Answer 1

Wie in der Dokumentation für Bootstrap 3 beschrieben, werden eine Reihe von Ereignissen angezeigt, die Sie mit den meisten ihrer JS-Funktionen verknüpfen können. In diesem Fall

die Ereignisse: zeigen, gezeigt, verstecken, versteckt und geladen

Der folgende Code wird Ihr zur automatischen Vervollständigung Eingabefeld initialisieren, nachdem die modale gezeigt wurde. (Ersetzen myModal mit der ID der modal Sie zeigen wollen)

$(document).ready(function() { 
    $('#myModal').on('shown.bs.modal', function (e) { 

    $("#autocomplete').autocomplete('destroy'); //remove autocompete to reattach 
    $('#autocomplete').autocomplete({ 
     source: $(this).data('autocomplete-url'), 
     data: {term: $(this).val() } 
    }); 

    }); 
}); 

Wenn Sie einen Teil sind holen, die das Eingabefeld enthält und an den modalen während des Toggle anhängen, wird es besser sein, dies zu tun Initialisierung im Rückruf von dieser Ajax-Anfrage.