master

分支 (1)

管理

管理

master

jquery-autocomplete
/
test2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>复杂例子</title>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <script type="text/javascript">
    $(function(){
        var emails = [
            { name: "王玮", to: "155" },
            { name: "杨伟倩", to: "104" },
            { name: "潘国新", to: "72" },
            { name: "陈顺根", to: "82" },
            { name: "徐建平", to: "117" },
            { name: "朱新南", to: "116" },
            { name: "杨志仲", to: "26" },
            { name: "周寅福", to: "118" },
            { name: "许定华", to: "106" },
            { name: "强国青", to: "68" },
            { name: "万美群", to: "67" },
            { name: "范微琴", to: "63" }
        ];

        $("#autocomplete").autocomplete(emails,{
            minChars: 0,//自动完成激活之前填入的最小字符
              max:12,//列表条目数
              width: 400,//提示的宽度
              scrollHeight: 300,//提示的高度
              matchContains: true,//是否只要包含文本框里的就可以
              autoFill:false,//自动填充
              formatItem: function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
return i + '/' + max + ':"' + data.name + '"[' + data.to + ']';
            },
            formatMatch: function(data, i, max) {//配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据
return data.name + data.to;
            },
            formatResult: function(data) {//定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据
return data.name;
            }
        }).result(function(event,data,formatted){
            //alert(data.to);
            console.log(data);
            document.getElementsByName("AuthorID")[0].value = data.to;
        });
    });
    </script>
</head>
<body>
    <!--参考：http://blog.csdn.net/lqh4188/article/details/43017937-->
    <input type="text" id="autocomplete" />
    <div style="margin:20px;">
        <span>选择的值：</span>
        <input name="AuthorID" type="text" />

    </div>
</body>
</html>