autocomplete

简单易用的自动补全插件。移植自 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="[&quot;aaa&quot;, &quot;bbb&quot;, &quot;ccc&quot;, &quot;ddd&quot;, &quot;edfa&quot;, &quot;wdasda&quot;, &quot;tueiyhgk&quot;, &quot;vjflcjx&quot;]" 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>

复制代码

代码已复制

开发者文档

1.使用本地数据

2.使用Ajax数据

3.宽度自适应

通过HTML标记自动初始化

通过ajax读取数据

使用本地数据

返回数据格式

纯字符串格式

data-value 格式

下拉菜单样式