CODEWITHSUNDEEP
jqueryasp.net-mvc-3autocomplete
Kaps Hasija
Kaps Hasija

Reputation: 2177

Jquery autocomplete with Dynamic input box.?

I have done so much R & D for Jquery Auto complete, I found some result but not as much i needed. I am giving you code which are currently i am using .

    <ul>
         @foreach (var items in Model)
            {
             <li class="@items.ShortDesc" id="@items.ShortDesc">
                <div class="test0">             
                @Html.TextBox(@items.ShortDesc, @items.SfldDefault, new { @class = "catalog inputcatalog txtbox" })          
                                </div>  
                        </li>

                    }
                </ul> This  input  box will  created  by  Dynamic using forloop

// My Jquery Code

     $(function () {
    $("#Subject").autocomplete({
        source: '/Cataloging/Bib/GetSubject',
        minLength: 1,
        select: function (event, ui) {
            // Do something with "ui.item.Id" or "ui.item.Name" or any of the other properties you selected to return from the action
        }
    });
});

// My Action Method

  public ActionResult GetSubject(string term)
    {
         term = term.Substring(2, term.Length-2);

        return Json(db.BibContents.Where(city => city.Value.StartsWith(term)).Select(city => city.Value), JsonRequestBehavior.AllowGet);
    }

// My code is running with static input but while creating Dynamic I need to use live event but i don't know how can i use Live Event with this code.

NOTE: I am using static value of input "|a" after rendering on action i am removing that first two char to make proper search from database. Thanks

Upvotes: 0

Views: 1633

Answers (2)

Scott Selby
Scott Selby

Reputation: 9570

Change this to make the same class for all txtboxes

    <li class="ShortDesc" id="@items.ShortDesc">

.

$(document).ready(function () { 
    $('.ShortDesc').each(function () { 
            $(this).autocomplete({ 
                source: '/Cataloging/Bib/GetSubject',
                minLength: 1,
                select: function (event, ui) {
            // Do something with "ui.item.Id" or "ui.item.Name" or any of the other properties you selected to return from the action
        }
    });
});

$(Document).ready() should happen after all the Razor Commands are finished

Upvotes: 1

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17566

call a function every time after dynamically created an input

 create_dynaically(id);

this the function

function create_dynaically(id)
{

$("#"+id).autocomplete({   //this line
        source: '/Cataloging/Bib/GetSubject',
        minLength: 1,
        select: function (event, ui) {
            // Do something with "ui.item.Id" or "ui.item.Name" or any of the other properties you selected to return from the action
        }
    });

}

Upvotes: 0

Related Questions