JQuery AutoComplete－簡單過生活

以下連結是一個相當好用的 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 效果：

程式碼：

在 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>