Autocomplete自动补全被Actvice控件遮挡了 - FineUI 官方论坛

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FuelSaleReport.aspx.cs"
Inherits="AppBox.BusinessModel.FuelReport.FuelSalesReport.FuelSaleReport" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加油站销售日报表</title>
<link href="../../../res/jqueryui/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet" type="text/css" />
<style>
.ui-autocomplete-loading
{
background: white url('../../../res/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<x:PageManager ID="PageManager1" runat="server" AutoSizePanelID="mainRegion"></x:PageManager>
<x:RegionPanel runat="server" ID="mainRegion">
<Regions>
<x:Region ID="Region1" runat="server" Position="Top" Height="30" ShowBorder="False"
ShowHeader="False">
<Toolbars>
<x:Toolbar ID="Toolbar1" runat="server">
<Items>
<x:ToolbarText ID="ToolbarText1" runat="server" Text="时间范围：">
</x:ToolbarText>
<x:DatePicker runat="server" ID="txtStart" />
<x:ToolbarText ID="ToolbarText2" runat="server" Text="至" />
<x:DatePicker runat="server" ID="txtEnd" />
<x:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<x:TwinTriggerBox runat="server" EmptyText="请输入要查找的加油站名称(可多选)..." ShowLabel="false"
ID="Txtsearch" Width="150" ShowTrigger1="false" Trigger1Icon="Clear" Trigger2Icon="Search"
OnTrigger1Click="ttbSearch_Trigger1Click" OnTrigger2Click="ttbSearch_Trigger2Click">
</x:TwinTriggerBox>
<x:Button runat="server" ID="btnOK" Icon="ApplicationGo" Text="报表统计" OnClick="BtnOKClick">
</x:Button>
</Items>
</x:Toolbar>
</Toolbars>
</x:Region>
<x:Region runat="server" ShowBorder="False" ShowHeader="False" ID="mainFrame" Position="Center"
EnableIFrame="True" IFrameName="about:blank" />
</Regions>
</x:RegionPanel>
</form>
<script src="../../../res/jqueryui/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../res/jqueryui/js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script>
function onReady() {
var textbox1ID = '<%= Txtsearch.ClientID %>';
// 将字符串 val 以逗号空格作为分隔符，分隔成数组
function split(val) {
return val.split(/,\s*/);
}
// 取得以逗号空格为分隔符的最后一个单词
// 比如，输入为 "C++, C#, JavaScript" 则输入出 "JavaScript"
function extractLast(term) {
return split(term).pop();
}
$('#' + textbox1ID).bind("keydown", function (event) {
// 通过 Tab 选择一项时，不会使当前文本框失去焦点
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function (request, response) {
$.getJSON("../Search.ashx?t=SiteSearch", {
term: extractLast(request.term)
}, response);
},
search: function () {
// 自定义的minLength（如果要限制两个字符才提示，把下面的1改为2即可）
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus: function () {
// 阻止某一项获得焦点时，更新文本框的值
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// 移除用户正在输入项
terms.pop();
// 添加用户选择的项
terms.push(ui.item.value);
// 添加占位符，确保字符串的最后以逗号空格结束
terms.push("");
this.value = terms.join(", ");
return false;
}
});
Ext.useShims = true;
}
</script>
</body>
</html>

复制代码