JavaScript 自动完成脚本整理(33个) 完整攻略

简介

自动完成是指在用户输入时，自动帮助用户补全已知的完整表达。这在网页制作中特别常见，利用 JavaScript 可以很容易地实现自动完成。

本攻略将介绍 JavaScript 中的33个自动完成脚本整理，包含输入提示，模糊搜索等常用自动完成功能的实现方式。下面进行详细讲解。

代码实现

1. 使用 jQuery UI Autocomplete 插件实现输入提示

jQuery UI Autocomplete 插件是一个非常实用的自动完成插件，它可以检验用户输入的有效性，并在输入时给出提示。以下是实现代码。

$(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"
  ];
  $( "#autocomplete" ).autocomplete({
    source: availableTags
  });
});

2. 使用 jQuery UI Autocomplete 插件实现模糊搜索提示

有时用户输入的关键字并不完整，或者用户不知道要输入的完整关键字。这时候可以使用 jQuery UI Autocomplete 插件实现模糊搜索提示。

$(function() {
  var options = {
    url: "/search.php",
    getValue: "name",
    list: {
      match: {
        enabled: true
      }
    }
  };
  $("#search").easyAutocomplete(options);
});

3. 使用 Typeahead.js 插件实现输入提示

Typeahead.js 插件是另一个非常实用的自动完成插件，可以实现高性能并支持多种数据源。以下是实现代码。

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
});

4. 使用 Bloodhound 插件实现模糊搜索提示

Bloodhound 是一个灵活、快速的类型ahead.js引擎，依赖 jQuery。它支持远程数据或本地数据处理，并且可以构建所需复杂数据集。

var movies = new Bloodhound({
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: '/data/post_1960.json',
    filter: function(list) {
      return $.map(list, function(movie) {
        return { value: movie };
      });
    }
  }
});

// kicks off the loading/processing of `local` and `prefetch`
movies.initialize();

$('.typeahead').typeahead(null, {
  name: 'movies',
  displayKey: 'value',
  hint: true,
  source: movies.ttAdapter(),
  templates: {
    empty: [
      '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<div>{{value}}</div>')
  }
});