mobileAutocomplete

传统autocomplete插件多数基于PC端，依赖jquery，体积庞大；本插件基于移动设备特性制作，跟DOM元素基本解耦（DOM及样式可完全自定义），拓展性强，压缩后体积只有2KB，非常适合移动应用使用（依赖zeptojs，当然jquery也是可以的）。

用户在输入框中输入内容的过程中，调用服务端接口，实时将匹配的内容返回并显示出下拉列表，提供给用户选择，提高用户的输入效率，在移动端打字不方便的背景下，该功能的需求非常庞大。

展示效果

DEMO

如何使用

HTML代码：

<input id="city" />

Javascript代码：

1）本地数据模式

$('#city').mAutocomplete({
    source: ['深圳', '北京', '上海', '杭州', '珠海'],
    onSelect: function(el) {
        alert(el.text());
    }
})

2）远程AJAX请求数据模式

$('#city').mAutocomplete({
    source: function(request, response) {
        $.ajax({
            url: 'http://gd.geobytes.com/AutoCompleteCity',
            data: {
                q: request.term
            },
            type: 'get',
            dataType: 'jsonp',
            success: function(data) {
                //由于接口返回的是数组[aa,bb,cc]，因此对其进行对象组装
                var array = [];
                for(var i = 0; i < data.length; i ++) {
                    array.push({
                        value: data[i],
                        title: data[i]
                    })
                }
                //将处理好的数组用response进行回调，此时数组格式为[{value:1,title:aa},{...}]
                response(array);
            }
        })
    },
    onSelect: function(el) {
        alert(el.text());
    }
})

可配置项：

/**
 * 默认配置
 */
var defaults = {
    //当输入字符达minChars时，开始触发autocomplete
    minChars: 2,
    //请求配置函数
    source: null,
    //选择选项后触发事件
    onSelect: null,
    //当input聚焦时，是否自动将input滚动到页面顶部（防止移动设备弹出键盘挡住）
    scrollOnFocus: true,
    //最多显示maxItems条匹配记录
    maxItems: 10,
    //input改变后keyboardDelay毫秒后触发服务器请求，防止过于频繁的请求
    keyboardDelay: 300,
    //选择选项后，列表是否自动消失
    closeOnSelect: true,
    //ul的模板
    ulTemplate: '<ul class="autocomplete-list"></ul>',
    //单独一个选项的模板
    itemTemplate: '<li class="autocomplete-item">{{title}}</li>',
    //整个ul将插入到parent这个DOM中
    parent: 'body'
}

关于配置项parent的说明

parent默认值是body，即默认生成的下拉列表是会append到页面的body下的，如有其他特殊需求，如DOM结构是这样的

<div id="autocompleteUl">
    <ul class="search-list">
        <li class="keyword">XXXX</li>
        <li class="keyword">XXXX</li>
        ...
    </ul>
</div>

则可以在初始化的时候设定parent的值为 “#autocompleteUl”

关于配置项ulTemplate和itemTemplate的说明

ulTemplate的默认值是<ul class="autocomplete-list"></ul>，itemTemplate的默认值是<li class="autocomplete-item">{{title}}</li>，如有其他需求，如需上面举例的DOM结构，则可在初始化时候设定

{
    ulTemplate: '<ul class="search-list"></ul>',
    itemTemplate: '<li class="keyword">{{title}}</li>'
}

关于配置项onSelect的说明

该配置项为函数，指定了用户点击了某个下拉列表后会触发的事件，其中带有一个参数el为用户点击项的DOM对象，可通过往列表DOM中的属性种入各种自定义值，并在onSelect触发时从DOM属性中取出使用。如

onSelect: function(el) {
    //打印被选中的选项的value属性
    console.log(el.attr('value'))
}

关于配置项source的说明

该配置项为函数，确定了与服务器之前的接口。该配置参照了JqueryUI中的Autocomplete，有两个参数request和response，其中request.term中装载着当前input的值，而返回的结果需要用response进行回调。

    source: function(request, response) {
        $.ajax({
            url: 'http://gd.geobytes.com/AutoCompleteCity',
            data: {
                q: request.term
            },
            type: 'get',
            dataType: 'jsonp',
            success: function(data) {
                //由于接口返回的是数组[aa,bb,cc]，因此对其进行对象组装
                var array = [];
                for(var i = 0; i < data.length; i ++) {
                    array.push({
                        value: data[i],
                        title: data[i]
                    })
                }
                //将处理好的数组用response进行回调，此时数组格式为[{value:aa,title:aa},{...}]
                response(array);
            }
        })
    }

Q&A

1. 服务端返回的数据结构跟插件要求的不匹配怎么办？

答：在source配置项中，接受到服务端返回的数据后，可自行对其进行重新组装，在组装好后再将其作为参数调用response即可。注意response的参数必须是数组，且数组的每一项皆为对象，如：[{value:1,title:aa},{...}]，此时，在配置项itemTemplate中就可以很方便地用{{value}}或{{title}}进行值的调用从而生成列表。

Mobileautocomplete

autocomplete suggestion mobile-first 自动补全