搜索框自动提示(仿Baidu)（二）

记前几天用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也很不错。果然是站在伟人的肩膀上做事轻松很多啊。继续努力。。。

※如果你觉得这篇文章不错，请点击推荐。如果你觉得我写的对你有用请关注我。
作者：Max蚊子
网站：feiger.cn 飞鸽博客，关注互联网、站长圈的程序员博客！

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。