用于MVC 5模型的Typeahead.js [英] Typeahead.js for MVC 5 Models

问题描述

使用用于MVC 5模型包装程序的Typeahead.js刚刚实现了预输入功能

Ive just imlemented typeahead functionality using thw Typeahead.js for MVC 5 Models wrapper

http://timdwilson.github.io/typeahead-mvc-model/

一切正常，但我只是想不通如何设置建议下拉列表中显示的项目数限制. javascript就是这个

it all works ok but i just cant figure out how to set the limit on the number of items displayed in the suggestion drop down. the javascript would be this

$('#scrollable-dropdown-menu .typeahead').typeahead(null, {
  name: 'countries',
  limit: 10, -----> limit set here
  source: countries
});

但是我看不到mvc模型包装器是如何实现的，有三个重载，其中一个具有"AdditionalViewdata"，也许这是需要什么?我找不到任何文档，而且似乎也没有其他人这样做(看起来它在下拉列表中默认为5).我的后端机制正在返回5个以上的结果，只是没有反映在html

but I cant see how the mvc models wrapper implements this, there are three overloads and one of the has 'AdditionalViewdata' maybe this is whats needed ? There is no documentation that I can find and no one else seems to have done this (it looks like it defaults to 5 in the dropdown) My backend mechanism IS returning more than 5 results, its just not being reflected in the html

@Html.AutocompleteFor(model => model.Organisation.Org, model => model.Organisation.ORGID, "Autocomplete", "Organisation", false, new { htmlAttributes = new { @class = "form-control" } })

任何人都可以帮忙吗?

推荐答案

关键是使用linq"Take"

The key is to use the linq "Take"

这有效:1)在控制器中创建一个动作，并将RouteConfig设置为开始该动作

This works: 1) Create an action in your controller and set the RouteConfig to start this action

public class HomeController : Controller
{
    public ActionResult Index20()
    {
        MyViewModel m = new MyViewModel();
        return View(m);
    }

创建没有任何类型母版页的视图 添加此视图模型:

Create a view without any type of master page Add this view model:

public class MyViewModel
{
    public string SourceCaseNumber { get; set; }
}

转到管理Nuget程序包"或"PM控制台"并添加到MVC 5项目-Tim Wilson编写的用于MVC 5模型的Typeahead.js 将添加的HtmlHelpers.cs的命名空间更改为System.Web.Mvc.Html并重建 添加此类:

Go to Manage Nuget Packages or PM Console and add to MVC 5 project - Typeahead.js for MVC 5 Models by Tim Wilson Change the namespace for the added HtmlHelpers.cs to System.Web.Mvc.Html and rebuild Add this class:

public class CasesNorm
{
    public string SCN { get; set; }
}

将以下方法添加到您的控制器中:

Add these methods to your controller:

private List<Autocomplete> _AutocompleteSourceCaseNumber(string query)
    {
        List<Autocomplete> sourceCaseNumbers = new List<Autocomplete>();
        try
        {
            //You will goto your Database for CasesNorm, but if will doit shorthand here

            //var results = db.CasesNorms.Where(p => p.SourceCaseNumber.Contains(query)).
            //    GroupBy(item => new { SCN = item.SourceCaseNumber }).
            //    Select(group => new { SCN = group.Key.SCN }).
            //    OrderBy(item => item.SCN).
            //    Take(10).ToList();   //take 10 is important

            CasesNorm c1 = new CasesNorm { SCN = "11111111"};
            CasesNorm c2 = new CasesNorm { SCN = "22222222"};
            IList<CasesNorm> aList = new List<CasesNorm>();
            aList.Add(c1);
            aList.Add(c2);
            var results = aList;

            foreach (var r in results)
            {
                // create objects
                Autocomplete sourceCaseNumber = new Autocomplete();

                sourceCaseNumber.Name = string.Format("{0}", r.SCN);
                sourceCaseNumber.Id = Int32.Parse(r.SCN);
                sourceCaseNumbers.Add(sourceCaseNumber);
            }
        }
        catch (EntityCommandExecutionException eceex)
        {
            if (eceex.InnerException != null)
            {
                throw eceex.InnerException;
            }
            throw;
        }
        catch
        {
            throw;
        }
        return sourceCaseNumbers;
    }

    public ActionResult AutocompleteSourceCaseNumber(string query)
    {
        return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet);
    }

     throw;
    }
    catch
    {
        throw;
    }
    return sourceCaseNumbers;
}

public ActionResult AutocompleteSourceCaseNumber(string query)
{
    return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet);
}

信用转到 http://timdwilson.github.io/typeahead-mvc-model/

这篇关于用于MVC 5模型的Typeahead.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！