由autocomplete想到的

这里说的 autocomplete 是 HTML 的 form表单里面 autocomplete 属性，并不是什么 jquery 插件什么来的，今天看到这个属性不错，来研究研究。

比如登录163邮箱时，肯定会有这样的提示

不管你保不保存，下次输入账号时都可以看到曾经输过的帐号了。

Ajax登录

比如一个简单登录页面的代码可能是这样的:

<form action="/login">
<label for="account">account</label><input type="text" name="account" />
<label for="passowrd">account</label><input type="passowrd" name="passowrd" />
<input id="submit" type="submit" value="submit" />
</form>

各家网站都对自己的产品执着，不愿意看到页面跳动，导致AJAX横行。最常见的就是登录，登录成功就进入下一页，登录失败就原地不动，提示失败原因。

所以，很多同学会把代码写成类似这样

function checkForm(){
    $.ajax(
        {url:"check.action",
        param:{account:$("#account").val(),password:$("#password").val()}
        success:checkSuccess}
    );
}
function checkSuccess(resp){
    if(resp.result="0"){
        location.href="loginsuccess.jsp";
    }else{
        alert("account not match");
    }
}

登录功能是完成了，也实现了失败无抖动。但是发现登录成功之后，再次登录时，输入框里面并不能下拉出历史登录的帐号来。

表单提交

如果写成Ajax你可能要先把结构改为form-submit提交的方式。防抖动嘛，其实解决的办法有很多。先了解一下原理。

form 表单一定要被submit提交，还要把form的 autocomplete 属性设为 off,否则都不会被记录。
一般用于input type=”text” , html5的其它应该也可以比如 number,email等，没实验过，password不行，如果不想某个输入框出现下拉，则可以在对应的input的后面加上autocomplete=”off”
在Ajax返回里面去做form.submit()，是有风险的，目前测试只有Firefox可以，IE和Chrome均不行。其实在Ajax的successFun里面还有很多其它的事不能做，如window.open等等，会被拦截
触发表单提交前，input一定要有name属性，不要只给个id通过脚本做。

OK，基于上面的原则，随便就可以拿出几个方案

Ajax改为同步，这样就不存在浏览器识别性的问题了，缺点是如果耗时高会有“假死“现象
就用最普通的submit,但把form的 target指到一个内嵌的iframe里面。然后由iframe回调登录结果，缺点是你可能第一次就会跳出浏览器提示（实际上是错误密码还没登录进去）~
Ajax还是异步，在返回里面触发一个全局事件，简单点说就是一个submit事件，把浏览器忽悠过去。代码如下

function checkSuccess(resp){
    if(resp.result="0"){
        $('#submit').click();
    }else{
        alert("account not match pas");
    }
}

这几个方案各有优缺点，要看产品具体倾向。当然也可以混合使用。

当然要值得注意的是，很多网站的登录是使用https的，如果也要实现的话，需要跨域。关于如何跨域，方法也有不少，可以自行搜索。

说说HTML5的下拉list

其实如果有数据支撑且不考虑低级浏览器，可以考虑下HTML的下拉。W3c上已有例子：代码如下

<form action="/example/html5/demo_form.asp">
网页：<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>