jquery autocomplete 简单实用例子

<link href="../../themes/default/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.10.0.custom.min.js"></script>
<style>
.ui-autocomplete
{
max-height: 100px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 100px;
}
</style>
<script>
$(function () {
$("#User").autocomplete({
source: function (request, response) {
$.ajax({
url: "../../Control/UserControl/QueryUser.ashx",
dataType: "json",
data: {
key: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.STAFF_NAME + "-" + item.PARENT_FLOOR_NAME + "-" + item.FLOOR_NAME + "-" + item.OFFICE_CODE,
value: "OfficeFloorID=" + item.FLOOR_ID + "&officeId=" + item.OFFICE_ID
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
window.location.href = "OfficeFloorShow.aspx?" + ui.item.value
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
})
</script>
<asp:TextBox runat="server" Text="快速查询" ID="User"></asp:TextBox>