jquery UIメールボックス自動補完
4847 ワード
《1》
自動補完(autocomplete)は、ユーザーが完全な情報を入力するのを減らすUIツールです.一般的には、メールボックスを入力したり、キーワードを検索したりして、ユーザーが選択できるように対応する完全な文字列を抽出します.
まず、jquery UIに導入する2つのパッケージのうち、1つはjquery-uiです.js、jquery-ui.css
上のコードを小さく最適化してみましょう
自動補完(autocomplete)は、ユーザーが完全な情報を入力するのを減らすUIツールです.一般的には、メールボックスを入力したり、キーワードを検索したりして、ユーザーが選択できるように対応する完全な文字列を抽出します.
まず、jquery UIに導入する2つのパッケージのうち、1つはjquery-uiです.js、jquery-ui.css
<html>
<head>
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
$("#email").autocomplete({
delay: 0, // 300 ， 。
autoFocus:true, // true ， 。
//request ， term ，term 。
//response ：response(["aa","aaaa","aaaaaa","bb"])
source: function (request, response) {
var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//
var term = request.term; // ；
var name = term; //
var host = ""; // qq.com
var ix = term.indexOf('@'); //@
var result = []; //
// （email） @ ，
if (ix > -1) { // @ ， 。
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) { // name ：
// @ ， ， abc@1 [email protected]
// @ 。
var getHosts = []; // hosts
if (host) { // host
getHosts = $.grep(hosts, function (val, key) { // getHosts
if (val.indexOf(host) > -1) {
return val;
};
});
}
else {
getHosts = hosts;
}
var abc = $.map(getHosts, function (val) { // val getHosts 。
return name + "@" + val;
});
result.push(term);// qq.com， 163.com ， ， [email protected] ， 。 ， result
result = result.concat(abc);// abc result result
}
//result.push(term); // ， term 。 。
//result.unshift(term); // ; unshift ： ， ，
response(result);
}
});
</script>上のコードを小さく最適化してみましょう
<html>
<head>
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
$("#email").autocomplete({
delay: 0, // 300 ， 。
autoFocus:true, // true ， 。
source: function (request, response) {
var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//
var term = request.term; // ；
var name = term; //
var host = ""; // qq.com
var ix = term.indexOf('@'); //@
var result = []; //
// （email） @ ，
if (ix > -1) { // @ ， 。
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) { // name ：
var getHosts = []; // hosts
getHosts= host ? ($.grep(hosts, function (val) { return val.indexOf(host) > -1 })) : hosts;
result = $.map(getHosts, function (val) { // val getHosts 。
return name + "@" + val;
});
}
result.unshift(term); // unshift ： ， ，
response(result);
}
});
</script>