记前几天用js整了一个： 搜索框--自动提示(仿Baidu)（二），经过园友指点最开始发现我做了很多无用功，起时jQueryUI提供的autocomplete就是我要求的效果立马官网下载jQueryUI最新版本用jQueryUI做了一个相同效果出来，果断的比开始的漂亮多了。
1、还是具体如下：由于用的2.0framework 只有用 VS2005，所以手动构造jason数据
protected void Page_Load(object sender, EventArgs e) { string strRequest = Request.Form[0]; string strResult = @"[{""name"":""One""},{""name"":""Two""},{""name"":""Three""},{""name"":""Four""}]"; Response.Clear(); Response.Write(strResult); Response.End(); }
2、然后就是客户端
<head runat="server"> <title>jQuery UI 搜索提示框</title> <link rel="stylesheet" href="css/jquery.ui.all.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script> <%--<link rel="stylesheet" href="css/demos.css" />--%> <style type="text/css"> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #selector { 25em; } </style> <script type="text/jscript"> $( function(){ function log( message ) { $( "#log" ).html( message ); $( "#log" ).scrollTop( 0 ); } $("#selector").autocomplete({ source: function (request, response) { $.ajax({ type:"POST", url: "GetData.aspx", dataType: "json", data: { featureClass: "doyouknow", style: "full", maxRows: 5 //name_startsWith: request.term }, success: function(data) { response($.map(data, function (item) { return { label: item.name, value: item.name } })) } }) }, minLength: 1, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="demo"> <div class="ui-widget"> <label for="selector">Your city: </label> <input id="selector" style="height:20px; padding:0px; " name="selector" type="text" /> <div id="log" style="height: 200px; 300px; overflow: auto;" class="ui-widget-content"></div> </div> </div> </form> </body>
效果就这样出来了。
然后我移植到公司平台，再然后就悲催了。公司平台用了easyUI和jQuery1.4版本的。我晕了，不兼容是easyUI和jQueryUI有冲突还是jQuery版本冲突（jQuery我用平台的1.4结果alert都没得效果了，1.7版本的alert正常）。虽然还木有找到解决办法，但是收获是有的，以前知道有jqueryUI没去了解现在需要去了解多练练，easyUI也很不错。果然是站在伟人的肩膀上做事轻松很多啊。继续努力。。。