jQuery 插件autocomplete 应用（模拟的下拉菜单）

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

今天研究了下这个玩意，可生成模拟的下拉菜单。

从官网下载一个完整包

其中要实现下拉菜单需要引入必要的文件三个

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />

在html页面BODY标签中插入一个文本框，设置id为tags

<label>本地数据：</label><input style="width:300px; height:30px;" id="tags" type="text" /><br /><br />

然后就可以开始写具体代码了，

$("#tags").autocomplete(data,[config]);//数据和配置,如配置省略则采用默认配置

今天研究出来两种，

例子1：简单模式，数据为本地数组类型

$(document).ready(function(){var arr=["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
    $("#tags").autocomplete(arr, {
        minChars: 0,//开始显示时输入的最少字符个数
        max: 12,//显示的数据条数
        autoFill: true,//文本框中自动填充好与之匹配的第一个值
        mustMatch: true,//输入值与数据没有匹配的则清空文本框
        matchContains: true,//从头开始匹配还是要在字符串内部查看匹配false为从开头匹配
        scrollHeight: 220,//高度达到多少时开始有滚动条
        highlight: false,//高亮关键字
        width: 320,//宽度
    });
});

例子2：数据为本地JSON类型

$(document).ready(function(){
    var json=[
    { name: "Peter Pan", to: "peter@pan.de" },
    { name: "Molly", to: "molly@yahoo.com" },
    { name: "Forneria Marconi", to: "live@japan.jp" },
    { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
    { name: "Dr. <strong>Tech</strong> 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" }
];
    $("#tags").autocomplete(json, {
        minChars: 0,//开始显示时输入的最少字符个数
        max: 12,//显示的数据条数
        autoFill: true,//文本框中自动填充好与之匹配的第一个值
        mustMatch: true,//输入值与数据没有匹配的则清空文本框
        matchContains: true,//从头开始匹配还是要在字符串内部查看匹配false为从开头匹配
        scrollHeight: 220,//高度达到多少时开始有滚动条
        highlight: false,//高亮关键字

        //multipleSeparator: " ",//一个文本框中要写入多个词时用来分割词的字符
        //multiple: true,//是否允输入多个值,这个为true上面的这个属性才能生效
 
        width: 320,//宽度

        formatItem: function(row) {//这里有三个参数 row, i, max 在调用json值时相当于循环输出每行json的值, i是当前的索引号,max是最大数据条数，不过我这里只用了一个参数 
            return row.to+':'+row.name;
        },
        formatResult: function(row) {//最终点击确定时输入在文本框中的值
        return row.to;
        }
        
    });
});

对于远程获取数据的还没研究出来，也求高手赐教。