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安装它,但结果是一样的:没有任何反应。
到目前为止已经试过:
- 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
答
好了,经过一番研究,我发现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;
}
});
我希望有人会觉得这有帮助!
你在浏览器的控制台中收到什么消息? – j08691
这应该是@section scripts {...}'s' – Gokhan
@ j08691没有,就像我在帖子中说的那样,控制台只是空白。 –