开发者文档
- 简单易用的自动补全插件。移植自 https://github.com/devbridge/jQuery-Autocomplete
注意,由于我们在示例中使用的是静态的假数据,当没有进行js过滤的时候无论输入任何字母,补全结果都是相同的,这不是bug。
- 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中。
- 更新 v1.2.0:增加了对返回数据格式的说明。
1.使用本地数据
Type country name in english:
2.使用Ajax数据
Type country name in english:
3.宽度自适应
Type country name in english:
- <div class="container">
- <h4>1.使用本地数据</h4>
- <div class="clearfix">
- <p>Type country name in english:</p>
- <div style="float:left;">
- <form class="sui-form">
- <input id="autocomplete" type="text" name="country" placeholder="输入..." class="input-xlarge" autocomplete="off">
- <div class="help-block">
- <div class="sui-msg msg-tips">
- <div id="selection" class="msg-con">请选择</div>
- <div class="msg-icon"></div>
- </div>
- </div>
- </form>
- </div>
- </div>
- <script src="assets/js/countries.js"></script>
- <script>
- $('#autocomplete').autocomplete({
- lookup: countries,
- minChars: 0,
- onSelect: function (suggestion) {
- $('#selection').html('You selected: ' + suggestion.value);
- }
- });
- </script>
- <h4>2.使用Ajax数据</h4>
- <div class="clearfix">
- <p>Type country name in english:</p>
- <div style="float:left;">
- <form class="sui-form">
- <input id="autocomplete-ajax" type="text" name="country" placeholder="输入..." class="input-xlarge" autocomplete="off">
- <div class="help-block">
- <div class="sui-msg msg-tips">
- <div id="selection-ajax" class="msg-con">请选择</div>
- <div class="msg-icon"></div>
- </div>
- </div>
- </form>
- </div>
- </div>
- <script>
- $('#autocomplete-ajax').autocomplete({
- serviceUrl: 'json/ac-strings.json',
- lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
- var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
- return re.test(suggestion.value);
- },
- onSelect: function (suggestion) {
- $("#selection-ajax").html('您选择了'+suggestion.value);
- },
- //- onHint: function (hint) {
- //- $('#autocomplete-ajax-x').val(hint);
- //- },
- onInvalidateSelection: function() {
- $('#selection-ajax').html('You selected: none');
- }
- });
- </script>
- <div style="width: 50%;" class="clearfix">
- <h4>3.宽度自适应</h4>
- <p>Type country name in english:</p>
- <div>
- <form class="sui-form">
- <input id="autocomplete-dynamic" type="text" name="country" style="width: 100%; " class="input-xlarge" autocomplete="off">
- </form>
- </div>
- <script>
- $('#autocomplete-dynamic').autocomplete({
- lookup: countries
- });
- </script>
- </div>
- </div>
调用 autocomplete
可以传入一个参数对象,所有配置项如下表所示。其中JSON格式的配置项同时也支持以data-api的形式来配置。
参数 | 默认值 | 说明 |
---|---|---|
autoSelectFirst | false | 是否自动选中第一个 |
appendTo | "body" | 自动补全的菜单的容器 |
serviceUrl | null | 获取数据的接口(服务器端的URL地址或者生成URL字符串的回调方法),如果定义了lookup 则此配置无效 |
lookup | null | 读取本地数据,建议查找数组。比如 ['a', 'b', 'c'],如果配置了lookup,则忽略serviceUrl |
onSelect | null | 选中结果时的回调,参数 (element, suggestion) |
width | auto | 下拉框宽度,默认与输入框一样 |
minChars | 1 | 出发自动补全的字符最小数量 |
maxHeight | 300 | 下拉菜单的最大高度 |
params | {} | 附加参数 |
formatResult | Autocomplete.formatResult | 自定义格式化补全结果,参数(suggestion, currentValue) |
noCache | false | 是否要缓存 |
lookupFilter | function (suggestion, originalQuery, queryLowerCase) { return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1; } | 过滤自动补全的结果,默认是匹配查询词。如果不需要过滤结果可以置为 $.noop。 |
paramName | query | 查询请求参数 |
transformResult | function (response) { return typeof response === 'string' ? $.parseJSON(response) : response; } | 处理ajax的返回结果,参数 (response)。 |
- 复制代码代码已复制
通过HTML标记自动初始化
在input上添加 data-toggle='autocomplete'
可以启用自动补全,并且所有js中可以配置的JSON格式的参数都可以通过 data-api 在html中直接配置。
比如:
- data-service-url
- data-lookup
- data-auto-select-first
- <form class="sui-form">
- <h4>通过ajax读取数据</h4>
- <input type="text" id="auto-init-1" value="" data-toggle="autocomplete" data-service-url="json/ac-strings.json" class="input-large">
- <h4>使用本地数据</h4>
- <input type="text" id="auto-init-2" value="" data-toggle="autocomplete" data-lookup="["aaa", "bbb", "ccc", "ddd", "edfa", "wdasda", "tueiyhgk", "vjflcjx"]" class="input-large">
- </form>
- 复制代码代码已复制
返回数据格式
ac支持两种返回数据格式,一种是纯字符串的格式,如下所示
{ "query": "a", "suggestions": [ "张三", "李四", "王五", "赵六" ] }另一种是 data-value 格式,其中value是自动补全的文本,而data可以是任意值,在onSelect等回调中可以取到data对象。如下所示:
{ "query": "a", "suggestions": [ { "value": "张三", "data": { "id": "123", "gender": "male"}}, { "value": "李四", "data": { "id": "124", "gender": "female"}}, { "value": "王五", "data": { "id": "125", "gender": "male"}} ] }
- <form class="sui-form">
- <h4>纯字符串格式</h4>
- <input type="text" value="" data-toggle="autocomplete" data-service-url="json/ac-strings.json" class="input-large">
- <h4>data-value 格式</h4>
- <input type="text" value="" id="data-demo" data-toggle="autocomplete" data-service-url="json/ac-data.json" class="input-large" autocomplete="off">
- <div class="help-block">
- <div class="sui-msg msg-tips">
- <div id="data-demo-msg" class="msg-con">请选择</div>
- <div class="msg-icon"></div>
- </div>
- </div>
- </form>
- <script>
- $("#data-demo").autocomplete({
- serviceUrl: 'json/ac-data.json',
- onSelect: function(e) {
- $("#data-demo-msg").text("你选择了:"+JSON.stringify(e));
- }
- })
- </script>
- 复制代码代码已复制
下拉菜单样式
关于下拉菜单样式,参见这里 dropdown
- <form class="sui-form">
- <div class="sui-dropdown-like">
- <input type="text" value="" data-toggle="autocomplete" data-service-url="json/ac-strings.json" class="input-large"><i class="sui-icon icon-pc-chevron-bottom"></i>
- </div>
- </form>
- 复制代码代码已复制