jQuery Autocomplete

🌙
手机阅读
本文目录结构
axihe

文档

插件 jQuery.autocomplete 中文 API 文档

这个插件是由 Pixabat.com 开发的,并为它提供了免费的 Public Domain 图片的国际存储库。我们已在生产中实施了该软件,并本着“ Pixabay”的精神与他人自由共享。

jQuery-autoComplete

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

通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。

通过输入更多的字符,用户可以过滤列表以获得更好的匹配。

Features

  • 轻量级:3.4 kB JavaScript- 压缩后小于 1.4 kB
  • 完全灵活的数据源
  • 智能缓存,延迟和最小字符设置
  • Callbacks

用法

在页面的<head>部分中 包含样式表 jquery.auto-complete.css- 并在加载 jQuery 库后添加 JavaScript 文件 jquery.auto-complete.min.js。autoComplete 接受来自键 / 值对对象的设置,并且可以分配给任何文本输入字段。

$(selector).autoComplete({key1:value1,key2:value2});

实例演示

搜索本地数据

该插件的设计主要考虑了 AJAX 请求,但也可以与本地数据一起使用。可以在源函数中将自动完成建议程序连接到字符串数组,如下所示:

$('input[name="q"]').autoComplete({
    minChars: 2,
    source: function(term, suggest){
        term = term.toLowerCase();
        var choices = ['ActionScript', 'AppleScript', 'Asp', ...];
        var matches = [];
        for (i=0; i<choices.length; i++)
            if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
        suggest(matches);
    }
});

源函数遍历(本地)选择数组,然后返回一个包含所有(小写)匹配项的新数组。就那么简单。

AJAX 请求

AJAX 请求可能有非常不同的要求:JSON,JSONP,GET,POST,其他参数,身份验证等。为了在保持完整灵活性的同时保持源代码较小,我们决定仅使用简单的回调函数作为源建议。在此函数内进行 AJAX 调用,并通过响应回调返回匹配的建议:

$('input[name="q"]').autoComplete({
    source: function(term, response){
        $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
    }
});

在此示例中,AJAX 调用需要返回字符串数组。即使未返回任何建议或发生错误,也必须始终调用回调响应。这样可以确保 autoComplete 实例的正确状态。

优化 AJAX 请求

默认情况下会缓存所有搜索结果,并阻止不必要的请求,以使服务器负载尽可能低。为了进一步减少对服务器的影响,可以在启动新的 AJAX 请求之前先中止未完成的 AJAX 请求:

var xhr;
$('input[name="q"]').autoComplete({
    source: function(term, response){
        try { xhr.abort(); } catch(e){}
        xhr = $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
    }
});

通过键入,用户可以在另一个请求之后触发一个 AJAX 请求。通过这一小技巧,我们可以确保仅执行最新的操作 - 如果尚未执行的话。

高级建议处理和自定义布局

通过使用 renderItem() 函数,可以将自动完成器变成项目建议器:

输入国家名称或语言代码时,将显示匹配建议的列表。例如,键入“ de”将显示“ Germany”作为建议,因为“ de”是德语的语言代码。此示例的源代码:

$('input[name="q"]').autoComplete({
    minChars: 1,
    source: function(term, suggest){
        term = term.toLowerCase();
        var choices = [['Australia', 'au'], ['Austria', 'at'], ['Brasil', 'br'], ...];
        var suggestions = [];
        for (i=0;i<choices.length;i++)
            if (~(choices[i][0]+' '+choices[i][1]).toLowerCase().indexOf(term)) suggestions.push(choices[i]);
        suggest(suggestions);
    },
    renderItem: function (item, search){
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
        var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
        return '<div class="autocomplete-suggestion" data-langname="'+item[0]+'" data-lang="'+item[1]+'" data-val="'+search+'"><img src="img/'+item[1]+'.png"> '+item[0].replace(re, "<b>$1</b>")+'</div>';
    },
    onSelect: function(e, term, item){
        alert('Item "'+item.data('langname')+' ('+item.data('lang')+')" selected by '+(e.type == 'keydown' ? 'pressing enter' : 'mouse click')+'.');
    }
});

在这种情况下,不需要自动填充文本字段,因此我们通过在 renderItem() 函数中设置 data-val =“’+ search +‘”将其关闭。但是,选择一个项目时,onSelect() 回调将返回所有必需的信息。

又一个演示

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Github

https://github.com/Pixabay/jquery-autoComplete


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang