使用动态输入框进行Jquery自动完成。

时间:2012-11-20 04:28:53

标签: jquery asp.net-mvc-3 autocomplete

我做了很多R& D为Jquery Auto完成,我发现了一些结果,但没有我需要的那么多。我给你的代码目前正在使用。

    <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

//我的Jquery代码

     $(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
        }
    });
});   

//我的行动方法

  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);
    }

//我的代码使用静态输入运行但是在创建动态时我需要使用实时事件,但我不知道如何使用此代码使用Live Event。

注意:在渲染动作后我使用输入“| a”的静态值我正在删除前两个char以从数据库进行正确搜索。 感谢

2 个答案:

答案 0 :(得分:1)

更改此选项可为所有txtbox创建相同的类

    <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
        }
    });
});
所有Razor命令完成后,

$(Document).ready()应该发生

答案 1 :(得分:0)

每次动态创建输入后调用一个函数

 create_dynaically(id);

这个功能

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
        }
    });

}