JAvaでjquery AutoCompleteで自動補完(二)ローカルJSONで自動補完を実現
2043 ワード
ローカルJSON自動補完を実現
前回はjquery autocompleteプラグインを使って簡単な自動補完機能を書く方法を説明しました.次の例を示します.
前回はjquery autocompleteプラグインを使って簡単な自動補完機能を書く方法を説明しました.次の例を示します.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> </title>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link rel="stylesheet" href="jquery.autocomplete.css" />
<script type="text/javascript">
// <JSON>
var datas = [
{stuName:' ',age:23},
{stuName:' ',age:26},
{stuName:' ',age:45},
{stuName:' ',age:45},
{stuName:' ',age:45},
{stuName:' ',age:45},
{stuName:' ',age:67}
];
//
$().ready(function ()
{
$("#autoComplete").autocomplete(datas,
{
minChars: 0,
max: 5,
autoFill: true,
mustMatch: true,
matchContains: true,
formatItem: function (data, i, total) {
return "<I>" + data.stuName + "</I>"+data.age;
}, formatMatch: function (data, i, total) {
return data.stuName;
}, formatResult: function (data) {
return data.stuName;
}
});
});
//
function onSearch()
{
var nickName =$("#autoComplete").val();
alert(nickName);
}
</script>
</head>
<body>
<input type="text" id="autoComplete" placeHolder=" !"/>
<input type="button" name="btnSearch" onclick="onSearch();" value=" "/>
</body>
</html>