jquery autocomplete demo

来源：互联网发布：公司网络不稳定怎么办编辑：程序博客网时间：2024/06/04 18:40

根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。

jquery.autocomplete参考地址
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
http://docs.jquery.com/Plugins/Autocomplete
jquery.autocomplete源码

<html><head>    <title>jquery autocomplete demo</title>    <meta http-equiv="content-type" content="text/html; charset=gbk" />    <script src="<%=path%>/auto/jquery-1.7.1.min.js"></script>    <script src="<%=path%>/auto/jquery.autocomplete.js"></script>    <link rel="stylesheet" href="<%=path%>/auto/jquery.autocomplete.css" />    <script type='text/javascript'>            //可改成ajax变成动态数据            var address = [            { name: "西安", to: "xian" },            { name: "北京", to: "beijing" },            { name: "西宁", to: "xining" },            { name: "西藏", to: "xizang" },            { name: "天津", to: "tianjin" },            ];             $(function(){                $('#keyword').autocomplete(address, {                    max: 12, //列表里的条目数                    minChars: 1, //自动完成激活之前填入的最小字符                    width: 200, //提示的宽度，溢出隐藏                    scrollHeight: 300, //提示的高度，溢出显示滚动条                    matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示                    autoFill: false, //自动填充                    formatItem: function(row, i, max) {                        return row.name;                    },formatMatch: function(row, i, max) {                        return row.name + row.to;                    },formatResult: function(row) {                        return row.to;                    }                });            });        </script></head><body>        <h1>jquery autocomplete demo</h1>        <h1>            <input type="text" id="keyword"  style="width: 200px;"/>        </h1>    </body></html>

1 0