asp.net在应用母版的页面下采用了ModalPopupExtender弹出窗中应用autocomplete
autocomplete是jqueryUI的一个插件，可以实现自动填充的功能。
要点：1、应用了母版页，所以取页面上控件的ID时与一般方法不同
2、由于用了ajax的updatepanel，所以会出现第一次可以正常显示，updatepaenl更新页面以后就不行了（页面刷新后第二次就无法正常使用）的问题
3、在ModalPopupExtender关联的PANEL中应用时，autocomplete下拉框老是显示在底层，被PANEL覆盖，无法正常使用
本次用法：在界面上updatepanel中放置两个TEXTBOX控件：txtBox1、txtBox2、查询按钮；在ModalPopupExtender关联的PANEL中放置txtBox3、及保存按钮
txtBox1中放置从数据库中读取的记录值，以逗号分隔；txtBox2、txtBox3关联autocomplete，显示同样的内容。在脚本中实现将txtBox1中的值传给数组，然后添加到autocomplete下拉框，然后分别关联到txtBox2、txtBox3。
实现：
在源中添加引用及实现脚本
<%@ Page Title="测试" Language="C#" MasterPageFile="~/Mast.master" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="WeihuJzxDtxx" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 可以隐隐约约网上的也可以引用自己本地的（本地的注意js前是/不是~/）,样式也可以在母版页中引用 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <%--<link rel="stylesheet" href="/js/jquery-ui.css" />--%> <%--<link rel="stylesheet" href="/js/jquery.ui.autocomplete.css" />--%> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"> </asp:ScriptManagerProxy> <script type ="text/javascript">
//下面一句实现页面局部刷新时autocomplete任然有效 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onPageLoaded); function onPageLoaded() { var getValue = document.getElementById('<%=txtBox1.ClientID%>').value; var availableTags = getValue.split(","); $("#ctl00_ContentPlaceHolder1_txtBox2").autocomplete({ source: availableTags }); $("#ctl00_ContentPlaceHolder1_txtBox3").autocomplete({ source: availableTags }); }; </script>
脚本中取应用母版页的页面上的控件的ID：document.getElementById('<%=txtBox1.ClientID%>')或直接写为ctl00_ContentPlaceHolder1_txtBox2
避免单击txtBox3时autocomplete下拉框被遮挡：修改jquery-ui.css中autocomplete的值如下 ，增加z-index: 100000000000000000000000000000000;
使其始终保持在最上层（日历控件被遮挡也是采用这种修改方法）
.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; z-index: 100000000000000000000000000000000; }
在母版中引用本地放置的样式方法
<link href="App_Themes/jquery-ui.css" rel="stylesheet" type="text/css" />
参考文件1：
http://jqueryui.com/autocomplete/
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" /> </div> </body> </html>
参考文件2：
http://bbs.csdn.net/topics/390008006
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript" language="javascript"> //给ScriptManager的实例 添加加载成功后需要执行的js方法 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onPageLoaded); function onPageLoaded(sender, args) { alert("here"); function formatItemForLog(row){ return row[0]; } $("#auto").autocomplete("GetProjectPhasesList.aspx?UnitID=18",{ scroll:true, formatItem:formatItemForLog, cacheLength:0, delay:500, width:'150px', selectFirst:false, notRedirect:false }); alert("here2") } </script>