HTML5 WebStorage autocomplete 自動完成 使用範例
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 WebStorage Jquery autocomplete 開發心得 範例</title>
<link rel="stylesheet" href="http://jqueryui.com/demos/autocomplete//css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script src="json.js" type="text/javascript"></script>
<script>
$(function() {
var tags = [
"1234",
"1101",
"2330",
"2317",
"4960",
"4906",
"1102"
];
var tagsStr = JSON.stringify (tags); //將array轉換成json字串
//由於webstorage 只允許儲存一般字串及json字串
setWebStoragedata("tagsStr",tagsStr); //將json字串存入webStorage
$( "#search" ).autocomplete({
source: getWebStoragedata("tagsStr")
});
});
function getWebStoragedata(key) {
var jsonStr = localStorage.getItem(key);//取出webstorage內容
var jsonObj = jQuery.parseJSON(jsonStr) //轉型成jsonObject
return jsonObj;
}
function setWebStoragedata(key,val) {
if (localStorage) {
localStorage.setItem(key,val);
}
}
</script>
</head>
<body>
股號查詢：<input type="text" id="search" />
</body>
</html>
參考網址
jquery.com
jqueryui
沒有留言:
張貼留言