自动完成插件 autocomplete

四.自动完成插件 autocomplete

autocomplete插件能帮助我们实现类似于Google Suggest的效果:

插件首页:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

插件文档:

http://docs.jquery.com/Plugins/Autocomplete

配置说明:

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions

1.应用实例

本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:

实例代码:

 

 

<% @ Page Language = " C# "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title > jQuery PlugIn - 自动完成插件实例 AutoComplete  </ title >
     <!-- black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader -->
     < link  rel ="stylesheet"  type ="text/css"  href ="<%=WebConfig.ResourceServer +" /JsLib/jquery/themes/redmond/style.css"% > " />
     < link  rel ="stylesheet"  type ="text/css"  href ="<%=WebConfig.ResourceServer +" /JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.css"% > " />
     < script  type ="text/javascript"  src ="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js" ></ script >
     < script  type ="text/javascript"  src ="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" ></ script >
     < script  type ="text/javascript"  src ="<% =WebConfig.ResourceServer %>/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.min.js" ></ script >
     <%   if  ( false )
       { %> < script  src ="~/js/jquery-vsdoc-lastest.js"  type ="text/javascript" ></ script >
     <%  } %>
     < script  type ="text/javascript" >
         /* ========== 必须放在头部加载的语句块. 尽量避免使用 ========== */
     </ script >
     < style  type ="text/css" >
        body
         {
            font-size :  12px ;
         }
        
        .formLabel { float :  left ;  width :  150px ;  text-align : right ; }
        .formInput { float :  left ; }
     </ style >
</ head >
< body >
     <!--  Demo. 应用AutoComplete插件  -->
     < div  class ="ui-widget ui-widget-content ui-corner-all"  style ="width: 700px; padding: 5px;" >
         < h3 >
            Demo. 应用AutoComplete插件  </ h3 >
         < br  style ="clear: both"   />
         < div  class ="formLabel" >
             < label  for ="inputCityName" > 请输入城市拼音和汉字: </ label >
         </ div >
         < div  class ="formInput" >
             < input  id ="inputCityName"  name ="inputCityName"  type ="text"   />
         </ div >
         < br  style ="clear:both"   />
         < br  style ="clear: both"   />
         < div  class ="formLabel" >
             < label  for ="inputCityName" > 城市ID: </ label ></ div >
         < div  class ="formInput" >
             < input  id ="inputCityId"  name ="inputCityId"  type ="text"   /></ div >
         < br  style ="clear: both"   />
         < br  style ="clear: both"   />
     </ div >
     < script  type ="text/javascript" >
         /* ==========用户自定义方法========== */
         // 城市数据
         var  cityList;
         // autocomplete选项
         var  options  =  {
            minChars:  1 ,
            max:  500 ,
            width:  250 ,
            matchContains:  true ,
            formatItem:  function (row, i, max)
            {
                 return  i  +   " / "   +  max  +   " : \ ""  + row.CityNameEn +  " \ "  [ "   +  row.CityName  +   " ] " ;
            },
            formatMatch:  function (row, i, max)
            {
                 return  row.CityNameEn  +   "   "   +  row.CityName;
            },
            formatResult:  function (row)
            {
                 return  row.CityName;
            }            
        };
         // autocomplete初始化函数
         function  initAutoComplete(data)
        {
            cityList  =  data;
            $( " #inputCityName " ).autocomplete(cityList, options);
            $( " #inputCityName " ).result( function (event, data, formatted)
            {
                $( " #inputCityId " ).val(data.ElongCityId);
            });                    
        }


         /* ==========事件绑定========== */
        $( function ()
        {
        });

         /* ==========加载时执行的语句========== */
        $( function ()
        {
             // 加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
            $.getJSON( " cityinfo.htm " ,  null , initAutoComplete)  
        });        
     </ script >
</ body >
</ html >

转载于:https://www.cnblogs.com/zento/archive/2011/10/12/2209499.html