1、js插件连接 : 点击打开链接
2、主要是为了解决下拉框数据过多,动态的从后台查询数据,效果如下
引用 bootstrap.min.css、jquery-1.11.0.min.js、bootstrap-typeahead.js
html代码:
<div class="form-group">
<label for="">用户名称</label>
<input id="local_object_data" runat="server" autocomplete="off" data-provide="typeahead" type="text" data-items="12" class="input-sm form-control" placeholder="请输入" />
</div>
JS代码:
$('#local_object_data').typeahead({
source: function (query, process) {
$.ajax({
type: "Post",
url: "EditRoleUser.aspx/getResults",
contentType: "application/json;charset=utf-8",
dataType: "json",
timeout: 50000,
data: JSON.stringify({ 'name': $("#local_object_data").val() }),
async: false,
success: function (data) {
console.log(data);
var datas = eval("(" + data.d + ")");
process(datas);
},
error: function (err) {
console.log(err);
alert(err);
}
});
}
});
后台ASPX代码
[WebMethod]
public static string getResults(string name)
{
List<EmployeeInput> list = new List<EmployeeInput>();
ArrayList arr = new ArrayList();
DataTable dt = BLLRoleUser.GetEmployeeByName(name);
for (int i = 0; i < dt.Rows.Count; i++)
{
arr.Add("(" + dt.Rows[i]["FID"].ToString() + ")" + dt.Rows[i]["FItemName"].ToString());
}
DataContractJsonSerializer serializer = new DataContractJsonSerializer(arr.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, arr);
return System.Text.Encoding.UTF8.GetString(ms.ToArray());
}
}
以上便可以在C#代码中使用Bootstrap Typeahead ajax动态加载数据了