jquery autocomplete - string array

Question

My web form model(AdtFormModel) has this variable:

public List<String> TemoinsVille { get; set; }

I use a list because I want the user to be able to dynamically add more 'TemoinsVille' in the form. For now I have two textboxfor, when I fill both of them, my controller receives a string list with 2 items in it. I will add the feature to dynamically add TemoinsVille later.

In my form, I want to use an auto-complete field for this TemoinVille variable. I use a method called 'AutocompleteTous' that works, I use it somewhere else in the form. I don't know how to write the script so that the autocomplete works for a second TemoinVille input.

My JQuery code is:

   var auto5 = $('#AdtFormModel_TemoinsVille').autocomplete({
        source: '@Url.Action("AutocompleteTous", "InvForm")',
        minLength: 3,
        delay: 400
    }).data("ui-autocomplete");
    auto5._renderItem = function (ul, item) {
        return $("<li>")
            .attr("ui-autocomplete-item", item)
            .append(item.label.split("|")[0])
            .appendTo(ul);
    };
    auto5._renderMenu = function (ul, items) {
        var that = this;
        $.each(items, function (index, item) {
            that._renderItemData(ul, item);
        });
        $(ul).addClass("dropdown-menu");
    };

In my view, I have t TemoinVille textboxfor inputs:

@Html.TextBoxFor(x => x.AdtFormModel.TemoinsVille, new { Class = "form-control" }) @Html.ValidationMessageFor(x => x.AdtFormModel.TemoinsVille, null, new { @class = "text-danger" })

@Html.TextBoxFor(x => x.AdtFormModel.TemoinsVille, new { Class = "form-control" }) @Html.ValidationMessageFor(x => x.AdtFormModel.TemoinsVille, null, new { @class = "text-danger" })

the autocomplete works for the first input, but not for the second...

Here is the html code for the two inputs:

<div class="invalidite-section">
        <input Class="form-control" id="AdtFormModel_TemoinsVille" name="AdtFormModel.TemoinsVille" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="AdtFormModel.TemoinsVille" data-valmsg-replace="true"></span>
    </div>

<div class="invalidite-section">
        <input Class="form-control" id="AdtFormModel_TemoinsVille" name="AdtFormModel.TemoinsVille" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="AdtFormModel.TemoinsVille" data-valmsg-replace="true"></span>
    </div>

Any suggestions?

The entire cshtml page? The html code for my textboxfor are there — Melodie Gauthier
– Melodie Gauthier, Commented Nov 18, 2016 at 19:43
no, you shown us the code you use to generate the html, i would like to see the input part generated. Also check my answer — sandrina-p
– sandrina-p, Commented Nov 18, 2016 at 19:53

sandrina-p · Accepted Answer · 2016-11-19 12:13:51Z

1

You are targeting an id #AdtFormModel_TemoinsVille, that's the input right? The ID must be unique on page. So it will work only on first input it finds.

You need to target the elements by class, then the autocomplete should work in all inputs.

try something like this:

   var auto5 = $('.form-control input').autocomplete({ // I suppose .form-control is a div that contains the input

edited Nov 19, 2016 at 12:13

answered Nov 18, 2016 at 19:35

sandrina-p

4,2409 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Melodie Gauthier Over a year ago

How can I target the right variable? My model (AdtFormModel) variable is a list of string, both textboxfor inputs being an element of that list.. I tried $(.AdtFormModel.TemoinsVille) and $(.TemoinsVille)

sandrina-p Over a year ago

I need to see the html generated to see what's the right class. Try this: $('.form-control input').autocomplete({ . I suppose .form-control is a div that contains the input..

Collectives™ on Stack Overflow

jquery autocomplete - string array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related