插件地址:http://www.codigg.com/demo/selectInPlace/

本插件相当于一个加强版的auto-complete,功能创意来自

  1. outlook的联系人选择
  2. facebook的选择框
  3. qq的好友选择

目的:

  1. 避免用户输入不合法数据
  2. 当有多个条目名称相同时,通过描述、图片等来区分不同条目。特别适合于SNS网站中选择用户。

Jquery Plugin:selectInPlace

支持配置及特性:

  1. ajax或者预加载(dynamic 首次加载,适合于用户数少于200的用户)
  2. 单选或者多选(multiple)
  3. 输入多少个字、多长时间触发ajax事件(minchar)
  4. 支持自定义的label、html样式,自定义的value
  5. 不改动html,只加js事件就能实现。且原先服务端代码不用修改。
  6. 支持键盘操作,如上下、回车、esc等

浏览器兼容性:

IE6 , IE7,Firefox3 , Chrome

?View Code JAVASCRIPT
var settings = {
    data : null,// 数据
    url : "",// 返回数据的url,目前仅支持json
    param : "keyword",// url上带的param参数
    dynamic : false, // 是否为动态数据。如果为false,则从data或者从url中一次获取
    minchar : 1,// 触发事件的最小单位,推荐大于0
    opacity : 1.0,// 样式
    zindex : 20000,// 样式
    height : 200,// 样式:高度,超过此高度出现滚动条。TODO:滚动条时按上下如何自动focus
    delay : 500,// 键盘无动作多长时间会触发动作,推荐500-1000
    max : 10,// 最多选多少个
    loadingImg : 'ajax-loader.gif',// loading图像
    loadingText : 'Loading...',// loading文字
    autoChange : true,// 是否自动显示
    type : "GET",// 请求url的方法
    multiple : true,// 多值
    separator : ',',// 分隔符
    labelMethod : formatText,// 显示到已选择列表中的html,必须要符合一定格式
    htmlMethod : formatHtml,// 显示到下拉列表中的html,必须符合一定格式
    valueMethod : getValue,	// 从json中获取value的方法
    fullMessage : "最多只能选择10个条目" // 当已经选择的数量超过max时,给予提示
};

如果使用,请保留源码中的版权。

英文几年没用了,翻译太差,见谅。