阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery Autocomplete

      文档

      插件 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

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录