Bootstrap autocomplete not showing results-CodePudding

Hello there! I'm here to ask your help with a problem that i'm dealing with.

Autocomplete is not showing up any of the results, there are no errors on the console. This is my code:

Index.cshtml

@model GPRegistration
@{
    ViewData["Title"] = "Esegui Ricerca";
}
<h1>Esegui ricerca</h1>
<h4>Conteggio </h4>
<span >@ViewBag.Error_Label</span>
<hr />
<div >
    <div >
        @using (Html.BeginForm("Index", "Menu", FormMethod.Post))
        {
            @Html.AntiForgeryToken()
            <form asp-action="Index">
                <div asp-validation-summary="ModelOnly" ></div>
                <div >
                    <label asp-for="RegistrationTime" >Da Quando?</label>
                    <input asp-for="RegistrationTime"  />
                </div>
                <div >
                    <label asp-for="ExitTime" >Fino a</label>
                    <input asp-for="ExitTime"  />
                </div>
                <div >
                    <label asp-for="Nome" >Nome (opzionale)</label>
                    <input asp-for="Nome"  />
                </div>
                <div >
                    <label asp-for="Azienda" >Azienda (opzionale)</label>
                    <div >
                        <input asp-for="Azienda"  id="AziendaInput" autocomplete="off" />
                    </div>
                </div>
                <div >
                    <label >
                        <input  asp-for="IsWorker" /> Includi Interni
                    </label>
                </div>
                <div >
                    <input type="submit" value="Esegui Ricerca" >
                </div>
                <div >
                    <div >
                        <label >@ViewBag.SucessMessage</label>

                    </div>

                </div>
            </form>
        }
    </div>
</div>
<script>
</script>

<div>
    <a asp-action="Index" asp-controller="GPRegistrations">Visualizza lista Raw [debug]</a>
</div>

<script src="js/bootstrap-autocomplete.min.js"></script>
<script type="text/javascript">


    $(function() {
         $('#AziendaInput').autoComplete({
            resolverSettings: {
                url: '@Url.Action("GetAziende")'
                }
        });
});



</script>

GetAziende Method:

public string[] GetAziende(string q)
        {
            String[] aziende = _context.GPRegistrations.Where(x=> x.Azienda.ToLower().Contains(q.ToLower())).Select(x => x.Azienda).Distinct().ToArray();
            return aziende;
        }

I tried by checking in the "Network" tab on Chrome, and it passes correctly the JSON. All of the Scripts are loaded, i've checked that too...

CodePudding user response：

You need to put the class "basicAutoComplete" where you want to add the autocomplete.

Example :

<input asp-for="Azienda"  id="AziendaInput" autocomplete="off" />

The class "basicAutoComplete" is used to identify all the fields on which to activate a basic autocomplete. Then it needs to activate by jQuery.

Here is the link from bootstrap autocomplete. You can see it before use. https://bootstrap-autocomplete.readthedocs.io/en/latest/

CodePudding user response：

This is the error now:

Uncaught TypeError: e.fail is not a function
at Object.<anonymous> (bootstrap-autocomplete.min.js:1:2442)
at c (jquery.min.js:2:28294)
at Object.fireWith [as rejectWith] (jquery.min.js:2:29039)
at l (jquery.min.js:2:79825)
at Object.abort (jquery.min.js:2:76487)
at p.search (bootstrap-autocomplete.min.js:1:2017)
at u.handlerDoSearch (bootstrap-autocomplete.min.js:1:14293)
at u.handlerPreSearch (bootstrap-autocomplete.min.js:1:14041)
at u.handlerTyped (bootstrap-autocomplete.min.js:1:13792)
at HTMLInputElement.<anonymous> (bootstrap-autocomplete.min.js:1:12693)