Go语言视频零基础入门到精通

admin

jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。

jquery-autocomplete配置：
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />

首先是一个最简单的Autocomplete（自动完成）代码片段：



  
   1
  <
  HTML
  xmlns
  ="http://www.w3.org/1999/xhtml"
  >
  

   2
  
  <
  head
  runat
  ="server"
  >
  

   3
      
  <
  title
  >
  AutoComplate
  </
  title
  >
  

   4
      
  <
  script
  type
  ="text/javascript"
   src
  ="/js/jquery-1.4.2.min.js"
  ></
  script
  >
  

   5
      
  <
  script
  type
  ="text/javascript"
   src
  ="/js/jquery.autocomplete.min.js"
  ></
  script
  >
  

   6
      
  <
  link
  rel
  ="Stylesheet"
   href
  ="/js/jquery.autocomplete.css"
   
  />
  

   7
      
  <
  script
  type
  ="text/javascript"
  >
  

   8
          $(
  function
  () {

   9
              
  var
   data
  =
   
  "
  Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities
  "
  .split(
  "
   
  "
  );

  10
  

  11
              $(
  "
  #keyword
  "
  ).autocomplete(data).result(
  function
  (event, data, formatted) {

  12
                  alert(data);

  13
              });

  14
          });

  15
      
  </
  script
  >
  

  16
  
  </
  head
  >
  

  17
  
  <
  body
  >
  

  18
      
  <
  form
  id
  ="form1"
   runat
  ="server"
  >
  

  19
      
  <
  div
  >
  

  20
         
  <
  input
  id
  ="keyword"
   
  />
  

  21
         
  <
  input
  id
  ="getValue"
   value
  ="GetValue"
   type
  ="button"
   
  />
  

  22
      
  </
  div
  >
  

  23
      
  </
  form
  >
  

  24
  
  </
  body
  >
  

  25
  
  </
  html
  >



result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。

一个稍微复杂的例子，可以自定义提示列表:


  
   1
  <
  html
  xmlns
  ="http://www.w3.org/1999/xhtml"
  >
  

   2
  
  <
  head
  runat
  ="server"
  >
  

   3
      
  <
  title
  >
  自定义提示
  </
  title
  >
  

   4
      
  <
  script
  type
  ="text/javascript"
   src
  ="/js/jquery-1.4.2.min.js"
  ></
  script
  >
  

   5
      
  <
  script
  type
  ="text/javascript"
   src
  ="/js/jquery.autocomplete.min.js"
  ></
  script
  >
  

   6
      
  <
  link
  rel
  ="Stylesheet"
   href
  ="/js/jquery.autocomplete.css"
   
  />
  

   7
      
  <
  script
  type
  ="text/javascript"
  >
  

   8
         
  var
   emails
  =
   [

   9
              { name:
  "
  Peter Pan
  "
  , to:
  "
  peter@pan.de
  "
   },

  10
              { name:
  "
  Molly
  "
  , to:
  "
  molly@yahoo.com
  "
   },

  11
              { name:
  "
  Forneria Marconi
  "
  , to:
  "
  live@japan.jp
  "
   },

  12
              { name:
  "
  Master <em>Sync</em>
  "
  , to:
  "
  205bw@samsung.com
  "
   },

  13
              { name:
  "
  Dr. <strong>Tech</strong> de Log
  "
  , to:
  "
  g15@logitech.com
  "
   },

  14
              { name:
  "
  Don Corleone
  "
  , to:
  "
  don@vegas.com
  "
   },

  15
              { name:
  "
  Mc Chick
  "
  , to:
  "
  info@donalds.org
  "
   },

  16
              { name:
  "
  Donnie Darko
  "
  , to:
  "
  dd@timeshift.info
  "
   },

  17
              { name:
  "
  Quake The Net
  "
  , to:
  "
  webmaster@quakenet.org
  "
   },

  18
              { name:
  "
  Dr. Write
  "
  , to:
  "
  write@writable.com
  "
   },

  19
              { name:
  "
  GG Bond
  "
  , to:
  "
  Bond@qq.com
  "
   },

  20
              { name:
  "
  Zhuzhu Xia
  "
  , to:
  "
  zhuzhu@qq.com
  "
   }

  21
          ];

  22
  

  23
              $(
  function
  () {

  24
                  $(
  "
  #keyword
  "
  ).autocomplete(emails, {

  25
                      max:
  12
  ,   
  //
  列表里的条目数
  

  26
  
                      minChars:
  0
  ,   
  //
  自动完成激活之前填入的最小字符
  

  27
  
                      width:
  400
  ,     
  //
  提示的宽度，溢出隐藏
  

  28
  
                      scrollHeight:
  300
  ,   
  //
  提示的高度，溢出显示滚动条
  

  29
  
                      matchContains:
  true
  ,   
  //
  包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
  

  30
  
                      autoFill:
  false
  ,   
  //
  自动填充
  

  31
  
                      formatItem:
  function
  (row, i, max) {

  32
                          
  return
   i
  +
   
  "
  /
  "
   
  +
   max
  +
   
  "
  :"
  "
   
  +
   row.name
  +
   
  "
  "[
  "
   
  +
   row.to
  +
   
  "
  ]
  "
  ;

  33
                      },

  34
                      formatMatch:
  function
  (row, i, max) {

  35
                          
  return
   row.name
  +
   row.to;

  36
                      },

  37
                      formatResult:
  function
  (row) {

  38
                          
  return
   row.to;

  39
                      }

  40
                  }).result(
  function
  (event, row, formatted) {

  41
                      alert(row.to);

  42
                  });

  43
              });

  44
      
  </
  script
  >
  

  45
  
  </
  head
  >
  

  46
  
  <
  body
  >
  

  47
      
  <
  form
  id
  ="form1"
   runat
  ="server"
  >
  

  48
      
  <
  div
  >
  

  49
         
  <
  input
  id
  ="keyword"
   
  />
  

  50
         
  <
  input
  id
  ="getValue"
   value
  ="GetValue"
   type
  ="button"
   
  />
  

  51
      
  </
  div
  >
  

  52
      
  </
  form
  >
  

  53
  
  </
  body
  >
  

  54
  
  </
  html
  >



formatItem、formatMatch、formatResult是自定提示信息的关键。
formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。
formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，
formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。