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安装它，但结果是一样的：没有任何反应。

到目前为止尝试过：

Answer 1

Well, after some research, I found jQuery Autocomplete which worked since the first time, so here's the code I finally used:

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

using this data model:

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

and on the JS side:

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

I hope somebody will find this helpful!

推特的Typeahead无效

1 个答案: