WEB开发网
开发学院网页设计JavaScript 从零开始学习jQuery (十一) 实战表单验证与自动完... 阅读

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

 2010-09-14 13:46:42 来源:WEB开发网   
核心提示: 1.应用实例本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:图片看不清楚?请点击这里查看原图(大图)。实例代码:<%@PageLanguage="C#"%><!DOCTYPEhtmlPUBLIC"-//W3C//

1.应用实例

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

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

图片看不清楚?请点击这里查看原图(大图)。

实例代码:

<%@ 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>

上一页  5 6 7 8 9 10 

Tags:开始 学习 jQuery

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接