At.js实现的输入框参数提示

来源：互联网发布：驾校预约软件编辑：程序博客网时间：2024/05/18 13:45

At.js(https://github.com/ichord/At.js)是GitHub上的一个开源项目，MIT授权，主要用来实现类似于微博人人输入@后显示候选好友列表的功能，具体效果可参见官方Demo: http://ichord.github.io/At.js/ 。本文基于版本v0.4.0。

官网上有example.html，但略显复杂，其实At.js的基本使用相当简单，除了作为基础的jquery.js，只需要一个js文件和一个css文件，共三个资源：

jquery,js
jquery.atwho.js
jquery.atwho.css

然后定义一个输入框，再用js为该输入框设定关键字和候选数据即可。最简单的例子如下：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>at.js demo</title>     <link rel="stylesheet" type="text/css" href="styles/jquery.atwho.css">    <script type="text/javascript" src="scripts/jquery.js"></script>    <script type="text/javascript" src="scripts/jquery.atwho.js"></script>    <script>        $(function(){                          $('.inputor').atwho({                at: "@",                data: ["aaa","bbb","ccc"]             });        });    </script>  </head>  <body>    <input id="inputor" class="inputor" name="at" style="width:1000px;height:30px;"/>  </body></html>

我的项目中需要实现输入框的参数提示功能，即对类似(type,param1,param2)的输入，由type的值决定param1和param2的候选数据，并区分两个逗号，为”,param1"和”,param2”显示分别的候选数据，简化代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>at.js demo</title>        <link rel="stylesheet" type="text/css" href="styles/jquery.atwho.css">    <script type="text/javascript" src="scripts/jquery.js"></script>    <script type="text/javascript" src="scripts/jquery.atwho.js"></script>    <script>        $(function(){                          var types = ["NUM","CHAR"];            var param1;            var param2;            var commaCount;                       $('.inputor').atwho({                  at: "(",                  data: types,                  callbacks: {    /*  What to do before insert item's value into inputor.  @param value [String] content to insert @param $li [jQuery Object] the chosen item */                      before_insert: function(value, $li) {                          switch(value.substr(1,value.length-1)){                              case "NUM":                                  param1 = [{name: '1'},{name: '2'}];                                  param2 = [{name: '3'},{name: '4'}];                                  break;                              case "CHAR":                                  param1 = [{name: 'a'},{name: 'b'}];                                  param2 = [{name: 'c'},{name: 'd'}];                                  break;                          }                           return value;                      }                  }               });            $('.inputor').atwho({               at: ",",                callbacks: {                /*It would be called to match the `flag`.  It will match at start of line or after whitespace  @param flag [String] current `flag` ("@", etc)@param subtext [String] Text from start to current caret position.  @return [String | null] Matched result. */       matcher: function(flag, subtext, should_start_with_space) {       var match, regexp;      flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");       if (should_start_with_space) {         flag = '(?:^|\\s)' + flag;       }       regexp = new RegExp(flag + '([A-Za-z0-9_\+\-]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');      match = regexp.exec(subtext);       if (match) {       var i;       commaCount = 0;       for(i=0;i<subtext.length;i++){       if(subtext.charAt(i) == ","){       commaCount++;       }   }         return match[2] || match[1];       } else {         return null;   }   },   /*Filter data by matched string.@param query [String] Matched string.@param data [Array] data list   @param search_key [String] key char for seaching.     @return [Array] result data.*/        filter: function(query, data, search_key) {        if(commaCount == 1){        return param1;       }       else if(commaCount == 2){       return param2;   }      }                  }             });          });    </script>  </head>   <body>    <input id="inputor" class="inputor" name="at" style="width:1000px;height:30px;" autocomplete = "off"/>  </body></html>

此例实现了对(NUM,[1,2],[3,4])和(CHAR,[a,b],[c,d])的输入提示，关键在于三个回调函数：

在关键字”(”的before_insert函数中根据当前insert的值对param1和param2填充不同的数据。
在关键字“,”的matcher函数中计算当前输入框中内容(subtext)中逗号的个数(commaCount)。
在关键字”,”的filter函数中根据逗号的个数(commaCount)判断当前是第几个逗号，并相应返回param1或param2。

另外，可在input标签内添加autocomplete = “off”来关闭浏览器的自动提示功能，避免冲突。

新址：http://www.limisky.com/101.html