javascript - Twitter 的 Typeahead 无法正常工作

Question

我正在使用 C# 开发一个 MVC 项目，我需要一个搜索引擎。谷歌告诉我使用Twitter's Typeahead所以我试图让事情发挥作用，但它根本不起作用，即使是最简单的

<input id="search" />

@section Script{
    <script src="~/Scripts/typeahead.jquery.js"></script>
    <script src="~/Scripts/typeahead.bundle.js"></script>
    <script>
        var colors = ["red", "blue", "green", "yellow", "brown", "black"];

        $('#search').typeahead({ source: colors });
    </script>
}

此代码不会产生任何结果，只是页面上的一个输入不会触发任何内容。您可能会告诉我查看控制台，但它是空白的。我对此失去了理智!我什至尝试直接从 NuGet 安装它，但结果是一样的:没有任何反应。

到目前为止尝试过:

• Typeahead plugin is not working
• Can't get typeahead.js to work, no results will show
• http://www.arungudelli.com/jquery/simple-jquery-autocomplete-search-tutorial/
• http://mycodde.blogspot.mx/2014/12/typeaheadjs-autocomplete-suggestion.html
• http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-typeahead.php
• http://www.runningcoder.org/jquerytypeahead

Answer 1

好吧，经过一番研究，我发现 jQuery Autocomplete从第一次开始就有效，所以这是我最终使用的代码:

/// <summary>
/// Obtiene el JSON de resultados de búsqueda.
/// </summary>
/// <param name="query">Búsqueda.</param>
/// <returns></returns>
[HttpGet, Authorize]
public ContentResult getAll(string query)
{
    DataTable dt;
    List<Models.Global.ISearchResult> _l = new List<Models.Global.ISearchResult>();
    dt = ...
    foreach (DataRow dr in dt.Rows)
    {
        _l.Add(new Models.Global.ResultadosContratistasModel()
        {
            value = dr["NAME"].ToString(),
            Url = "/Account/{0}".Write(dr["ACCOUNTNUM"])
        });
    }
    ...
    return Content(JsonConvert.SerializeObject(new { suggestions = _l }), "application/json");
}

使用此数据模型:

public interface ISearchResult
{
    string value { get; set; }
    string Categoría { get; }
    string Url { get; set; }
    ISearchResultData data { get; }
}
public interface ISearchResultData
{
    string category { get; set; }
    string goTo { get; set; }
}

/// <summary>
/// objeto "data" del resultado de búsqueda rápida.
/// </summary>
[DataContract]
public struct SearchResultData : ISearchResultData
{
    /// <summary>
    /// Categoría de la respuesta.
    /// </summary>
    [DataMember]
    public string category { get; set; }
    /// <summary>
    /// Url a la que dirigirá el resultado.
    /// </summary>
    [DataMember]
    public string goTo { get; set; }
}

/// <summary>
/// Clase serializable de Resultados de búsqueda rápida de obra.
/// </summary>
[DataContract]
public class ResultadosObraModel : ISearchResult
{
    /// <summary>
    /// Texto a mostrar como resultado de la búsqueda.
    /// </summary>
    [DataMember]
    public string value { get; set; }
    /// <summary>
    /// Categoría del resultado de búsqueda.
    /// </summary>
    [IgnoreDataMember]
    public string Categoría
    {
        get
        {
            return "Obras";
        }
    }
    /// <summary>
    /// URL a la que deberá dirigirse si se selecciona la opción.
    /// </summary>
    [IgnoreDataMember]
    public string Url { get; set; }
    /// <summary>
    /// Objeto "data" con la información requerida por el plugin.
    /// </summary>
    [DataMember]
    public ISearchResultData data
    {
        get{
            return new SearchResultData()
            {
                category = Categoría,
                goTo = Url
            };
        }
    }
}

在 JS 端:

$('input#goBox').autocomplete({
    serviceUrl: '/consultas/getAll',
    minChars: 2,
    lookupLimit: 10,
    groupBy: 'category',
    noSuggestionNotice: 'Presiona "Enter" para ver más resultados.',
    onSelect: function (suggestion) {
        location.href = suggestion.data.goTo;
    }
});

我希望有人会觉得这有帮助!