新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

注意,由于我们在示例中使用的是静态的假数据,当没有进行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:

  1. <div class="container">
  2. <h4>1.使用本地数据</h4>
  3. <div class="clearfix">
  4. <p>Type country name in english:</p>
  5. <div style="float:left;">
  6. <form class="sui-form">
  7. <input id="autocomplete" type="text" name="country" placeholder="输入..." class="input-xlarge" autocomplete="off">
  8. <div class="help-block">
  9. <div class="sui-msg msg-tips">
  10. <div id="selection" class="msg-con">请选择</div>
  11. <div class="msg-icon"></div>
  12. </div>
  13. </div>
  14. </form>
  15. </div>
  16. </div>
  17. <script src="assets/js/countries.js"></script>
  18. <script>
  19. $('#autocomplete').autocomplete({
  20. lookup: countries,
  21. minChars: 0,
  22. onSelect: function (suggestion) {
  23. $('#selection').html('You selected: ' + suggestion.value);
  24. }
  25. });
  26. </script>
  27. <h4>2.使用Ajax数据</h4>
  28. <div class="clearfix">
  29. <p>Type country name in english:</p>
  30. <div style="float:left;">
  31. <form class="sui-form">
  32. <input id="autocomplete-ajax" type="text" name="country" placeholder="输入..." class="input-xlarge" autocomplete="off">
  33. <div class="help-block">
  34. <div class="sui-msg msg-tips">
  35. <div id="selection-ajax" class="msg-con">请选择</div>
  36. <div class="msg-icon"></div>
  37. </div>
  38. </div>
  39. </form>
  40. </div>
  41. </div>
  42. <script>
  43. $('#autocomplete-ajax').autocomplete({
  44. serviceUrl: 'json/ac-strings.json',
  45. lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
  46. var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
  47. return re.test(suggestion.value);
  48. },
  49. onSelect: function (suggestion) {
  50. $("#selection-ajax").html('您选择了'+suggestion.value);
  51. },
  52. //- onHint: function (hint) {
  53. //- $('#autocomplete-ajax-x').val(hint);
  54. //- },
  55. onInvalidateSelection: function() {
  56. $('#selection-ajax').html('You selected: none');
  57. }
  58. });
  59. </script>
  60. <div style="width: 50%;" class="clearfix">
  61. <h4>3.宽度自适应</h4>
  62. <p>Type country name in english:</p>
  63. <div>
  64. <form class="sui-form">
  65. <input id="autocomplete-dynamic" type="text" name="country" style="width: 100%; " class="input-xlarge" autocomplete="off">
  66. </form>
  67. </div>
  68. <script>
  69. $('#autocomplete-dynamic').autocomplete({
  70. lookup: countries
  71. });
  72. </script>
  73. </div>
  74. </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

通过ajax读取数据

使用本地数据

  1. <form class="sui-form">
  2. <h4>通过ajax读取数据</h4>
  3. <input type="text" id="auto-init-1" value="" data-toggle="autocomplete" data-service-url="json/ac-strings.json" class="input-large">
  4. <h4>使用本地数据</h4>
  5. <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">
  6. </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"}}
  ]
}

纯字符串格式

data-value 格式

请选择
  1. <form class="sui-form">
  2. <h4>纯字符串格式</h4>
  3. <input type="text" value="" data-toggle="autocomplete" data-service-url="json/ac-strings.json" class="input-large">
  4. <h4>data-value 格式</h4>
  5. <input type="text" value="" id="data-demo" data-toggle="autocomplete" data-service-url="json/ac-data.json" class="input-large" autocomplete="off">
  6. <div class="help-block">
  7. <div class="sui-msg msg-tips">
  8. <div id="data-demo-msg" class="msg-con">请选择</div>
  9. <div class="msg-icon"></div>
  10. </div>
  11. </div>
  12. </form>
  13. <script>
  14. $("#data-demo").autocomplete({
  15. serviceUrl: 'json/ac-data.json',
  16. onSelect: function(e) {
  17. $("#data-demo-msg").text("你选择了:"+JSON.stringify(e));
  18. }
  19. })
  20. </script>

下拉菜单样式

关于下拉菜单样式,参见这里 dropdown

  1. <form class="sui-form">
  2. <div class="sui-dropdown-like">
  3. <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>
  4. </div>
  5. </form>