我正在寻找一个很好的例子,我可以用asp.net Webforms应用程序实现Bootstrap Typeahead。
该应用程序已经使用Bootstrap主题和各种插件。现在我希望用户能够在输入最少三个字母的情况下搜索数据集。一旦用户输入三个字母,脚本将被触发以通过web方法开始搜索与输入的单词匹配的值,然后将结果传递给用户。
从我到目前为止在网上看到的例子中我得到了:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetNames(string term)
{
// A list of names to mimic results from a database
List<string> nameList = new List<string>
{
"Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer"
};
var results = nameList.Where(n =>
n.StartsWith(term, StringComparison.OrdinalIgnoreCase));
return new JsonResult()
{
Data = results.ToArray(),
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
在JsonResult()和JsonRequestBehavior之上的代码块无法识别,我收到错误。然后在客户端我有这个:
<input type="text" id="txtSearch" data-provide="typeahead" runat="server" />
然后我有这个脚本(也在网上找到):
<script type="text/javascript">
$(document).ready(function () {
$('#<%= txtSearch.ClientID %>').typeahead({
source: function (query, process) {
},
updater: function (item) {
// implementation
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items.sort();
},
highlighter: function (item) {
var regex = new RegExp( '(' + this.query + ')', 'gi' );
return item.replace( regex, "<strong>$1</strong>" );
},
});
});
</script>
试试这个
<input type="text" id="txtSearch" data-provide="typeahead" runat="server" />
//No javascript only add bootstrap.js or typeahead js and css
protected void Page_Load(object sender, EventArgs e)
{
List<string> nameList = new List<string>
{
"Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer"
};
string str = "";
for (int i = 0; i < nameList.Count; i++)
{
str = str + '"' + nameList[i].ToString() + '"' + ',';
}
if (str != "")
{
str = str.Remove(str.Length - 1);
}
str = "[" + str + "]";
txtSearch.Attributes.Add("data-source", str);
}
你可以试试这个:
文本框:
<asp:TextBox ID="txtBuscar" runat="server" CssClass="span3" placeholder="Text..." data-provide="typeahead" autocomplete="off" data-items="4"></asp:TextBox>
data-items = n项目列表
代码背后:
string asdf = "[\"Francisco\", \"Maria\", \"Fernando\", \"Alejandra\"]";
txtBuscar.Attributes.Add("data-source", asdf);