以下連結是一個相當好用的 Autocomplete  (JQuery Plugin)

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

在這邊將撰寫一個簡單的郵遞區號範例程式,程式中只會包含台北市郵遞區號,如果需要完

整郵遞區號內容,可至郵局下載,下載連結如下

http://www.post.gov.tw/post/internet/down/index.html?ID=190108

http://download.post.gov.tw/post/download/zip4%5B1%5D.xls.txt

UI 效果:

2010-07-17_144555

程式碼:

在 HTML HEAD 加入以下內容

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type='text/javascript' src='js/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='js/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='js/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
 
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="js/lib/thickbox.css" />

加入以下 HTML

郵遞區號:
<input type="text" name="zipcode" id="zipcode" size="3" autocomplete="off" />
<input type="text" name="dist" id="dist" />

加入下方 JavaScript

<script type="text/javascript">
var zipcode=[
{code:100,dist:"臺北市中正區"},
{code:103,dist:"臺北市大同區"},
{code:104,dist:"臺北市中山區"},
{code:105,dist:"臺北市松山區"},
{code:106,dist:"臺北市大安區"},
{code:108,dist:"臺北市萬華區"},
{code:110,dist:"臺北市信義區"},
{code:111,dist:"臺北市士林區"},
{code:112,dist:"臺北市北投區"},
{code:114,dist:"臺北市內湖區"},
{code:115,dist:"臺北市南港區"},
{code:116,dist:"臺北市文山區"}
];
 
$().ready(function() {
 
    $("#zipcode").autocomplete(zipcode, {        
        width: 182,                        
        formatItem: function(row, i, max) {            
                return row.code+" "+row.dist;                
        },
        formatResult: function(row) {            
            return row.code;
        }
    });
    
    $("#zipcode").result(function(event, data, formatted) {        
        $("#dist").val(data.dist);
    });
 
 
});
</script>

 

如果需要更多完整 Demos 程式,可至下方下載

http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip 

 

範例檔:autocomplete.rar

參考網站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

iammic 發表在 痞客邦 PIXNET 留言(0) 人氣()