输入框自动完成

2012-03-16

好久没有写博客了,再不更新博客,我都要忘记了,唉。就把这几天写的输入框自动完成弄上来。

什么是自动完成

通常指浏览器等软件自动跟踪用户最近键入的信息,如 Web 站点地址、表单的中信息以及搜索查询等并在键入新的信息时试图预测用户要键入的信息,并提供可能的匹配内容的功能。(via:wikipedia)

实现方式

可以实现当用户输入的时候去服务器请求数据,或者使用本地给的静态数据,并合并用户历史选择(优先显示),创建选择列表来方便用户输入。

此实现没有引用任何类库,只提供了一个外部接口给用户使用,数据格式使用json如下:

{
    status : 0,
    data : [{
            text : "中国",
            children : [{
                    id : 10,
                    text : "北京",
                    children : [{
                            text : "东城区"
                        }, {
                            text : "西城区"
                        }
                        ......
                    ]
                }
                ......
            ]
        }
        ......
    ]
}

调用接口:autoComplete(option),option为object,下面是详细参数说明:

  • option.target:目标输入框,默认值为false
  • option.ajaxUrl:ajax请求的地址,默认值为false
  • option.paramName:ajax请求的url参数名,默认值为false
  • option.ulClass:显示提示信息ul的class,默认值为”autoComplete”
  • option.callBack:用户选择的回调函数,默认值为false
  • option.staticData:静态数据,如果给了这个参数的话,将不是有ajax获取数据,默认值为false

提示信息相关的样式class,li.cur当前选中的条目,li.more有子条目的条目,li>span当前已经输入部分。

css示例:

body{
    font-size:14px;
    font-family:"微软雅黑";
}
label{
    line-height:25px;
}
.search{
    width:200px;
    height:23px;
    line-height:23px;
}
.autoComplete{
    width:200px;
    border: 1px solid #ccc;
    padding: 1px;
    margin: 0;
    background: #fff;
}
.autoComplete li{
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 20px;
    height: 20px;
    cursor: pointer;
}
.autoComplete li span{
    color:#777;
}
.autoComplete li:hover, .autoComplete .cur{
    background: #eee;
}

一些需要改进的

需要增加对历史选择的删除功能

不绑定input的change keyup paste事件,而绑定foucs blur事件,并用定时器处理输入是否改变,以消除中文输入法导致的字母

在客户端即对输入进行一些初步处理

大家有什么意见也欢迎提出来,全部代码DEMO