Twitter的Typeahead不工作

我正在与C＃的MVC项目，我需要一个搜索引擎。谷歌告诉我使用Twitter's Typeahead，所以我试图让事情工作，但它根本没有，甚至白衣简单Twitter的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安装它，但结果是一样的：没有任何反应。

到目前为止已经试过：

来源

2017-04-21 Kroneaux Schneider

你在浏览器的控制台中收到什么消息？ – j08691

这应该是@section scripts {...}'s' – Gokhan

@ j08691没有，就像我在帖子中说的那样，控制台只是空白。 –

好了，经过一番研究，我发现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; 
    } 
});

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

来源

2017-04-24 17:35:13

Twitter的Typeahead不工作

回答

相关问题