jquery autocomplete

jquery autocomplete 간단한 사용법

우선 사용하고자 하는 페이지의 자바스크립트

$('#name').autocomplete(uid, {
    minChars: 1,
    width: 210,
    max: 50,
    matchContains: true,
    autoFill: false,
    formatItem: function(row, i, max) {
        return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
    },
    formatMatch: function(row, i, max) {
        return row.name + " " + row.to;
    },
    formatResult: function(row) {
        return row.name;
    }
});

$('#name').result(function(event, row, formatted) {
    $('#to').val(row.to);
});

uid가 있는 자바스크립트

var uid = [
 { name: "Peter Pan", to: "peter@pan.de" },
 { name: "Molly", to: "molly@yahoo.com" },
 { name: "Forneria Marconi", to: "live@japan.jp" },
 { name: "Master Sync", to: "205bw@samsung.com" },
 { name: "Dr. Tech de Log", to: "g15@logitech.com" },
 { name: "Don Corleone", to: "don@vegas.com" },
 { name: "Mc Chick", to: "info@donalds.org" },
 { name: "Donnie Darko", to: "dd@timeshift.info" },
 { name: "Quake The Net", to: "webmaster@quakenet.org" },
 { name: "Dr. Write", to: "write@writable.com" }
];

name id를 가지고 있는 곳에서 입력하면 uid의 name과 일치하는 것들이 나타난다.

이때 해당하는 것을 선택하면 result 함수를 호출하게 된다.

여기서 필요한 작업을 하면 끝.

참조 url : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/