bootstrap typeahead 异步从后台提取数据 常用 *
bootstrap typeahead 异步从后台提取数据 常用 *
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.js"></script> <script src="js/bootstrap3-typeahead.min.js"></script> </head> <body> <div style="margin: 50px 50px"> <input type="text" id="txtUser" name="txtUser" value="" />
</div>
<script>
("#txtUser").typeahead({ source: function (query, process) {
![.ajax({ url: '/Tools/GetOperUsers', data: { name: query }, type: 'post', dataType: "json", success: function (data) { var res = [];](https://ask.qcloudimg.com/http-save/1692602/icpni4lgmz.svg)
.each(data, function (i, item) { var aItem = { id: item.CreateUserId, name: item.CreateUserRealName };//把后台传回来的数据处理成带name形式 res.push(aItem); })
return process(res);
}
});
}
});
});</script> </div> </body> </html>
后台返回数据
IList< OperLogModel >listData= operLogService.GetOperUsers(name); return Json(listData);