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

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>')
  }
});

结语

本攻略通过简单介绍了 JavaScript 自动完成脚本整理中的 33 个例子,从而让大家更好地了解这个方面的应用。需要注意的是,虽然这里展示了多种自动完成脚本整理实现方式,但在实际使用中,选择合适的自动完成脚本整理方式,是要根据自己的实际需求和业务场景来决定的。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 自动完成脚本整理(33个) - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Lua语言新手简单入门教程

    Lua语言新手简单入门教程 什么是Lua语言? Lua是一种简洁、可扩展的脚本语言。它被设计成一种嵌入式语言,可嵌入其他应用程序或运行时环境中。Lua具有轻量级、高效、快速、可移植和跨平台等特点,被广泛用于游戏开发、Web应用开发、科学计算、嵌入式系统、服务器端应用和工业自动化等领域。 安装Lua语言 在开始学习Lua语言前,首先需要安装Lua解释器。在官网…

    JavaScript 2023年5月28日
    00
  • JavaScript中常用的正则表达式日常整理(全)

    JavaScript中常用的正则表达式日常整理(全) 正则表达式是处理文本的重要工具,在JavaScript中也经常使用正则表达式来匹配和处理字符串。这里整理了JavaScript中常用的正则表达式,供参考和学习使用。 匹配特定字符 匹配任意字符:. .(点号)表示匹配任意字符,但是除了换行符。比如: let str = "Hello World!…

    JavaScript 2023年5月19日
    00
  • 在JavaScript中操作时间之getMonth()方法的使用

    当需要在JavaScript中操作时间时,一个常见的需求是获取当前时间的月份。这时可以使用JavaScript中的Date对象,并结合getMonth()方法来获取月份信息。下面详细讲解一下如何使用getMonth()方法。 1. getMonth()方法简介 getMonth()方法是Date对象的一个方法,用于获取当前时间的月份信息。getMonth()…

    JavaScript 2023年5月27日
    00
  • 举例讲解JavaScript substring()的使用方法

    下面我将为你详细讲解“举例讲解JavaScript substring()的使用方法”的完整攻略,包含以下内容: substring()方法的概述 substring()方法的语法 substring()方法的参数 substring()方法的返回值 substring()方法的示例说明 总结 1. substring()方法的概述 substring()是…

    JavaScript 2023年5月28日
    00
  • js bind 函数 使用闭包保存执行上下文

    js中bind函数是一个非常常用的函数,它可以改变函数的上下文(this),常常用于一些特殊情况,如在事件处理函数中改变this指向。在使用bind函数的时候,为了保证绑定的上下文在函数执行时正确,使用闭包保存执行上下文是一个非常好的选择,本攻略将详细讲解如何使用闭包保存执行上下文。 什么是bind函数? bind函数是js中常用的一个函数,可以修改函数的上…

    JavaScript 2023年6月10日
    00
  • 使用JavaScript获取电池状态的方法

    获取电池状态是Web开发中比较常见的需求之一,可以通过JavaScript获取电池状态,从而更好地帮助用户管理电池电量。 示例一:使用Battery API获取电池状态 在现代浏览器中,我们可以通过使用Battery API获取电池状态。首先,需要检测浏览器是否支持Battery API: if (‘getBattery’ in navigator) { /…

    JavaScript 2023年6月11日
    00
  • 防止网站内容被小偷采集的js代码 原创

    下面是防止网站内容被小偷采集的js代码的完整攻略,包含以下步骤: 步骤一:禁止右键菜单和文字选择 在网页中加入以下代码可以禁止鼠标右键菜单和文字选择: <body oncontextmenu="return false" onselectstart="return false"> 这样做可以有效防止普通用户…

    JavaScript 2023年6月11日
    00
  • 常见的javascript跨域通信方法

    常见的JavaScript跨域通信方法有以下几种: JSONP JSONP是一种跨域通信的方法,它利用了script标签没有跨域限制的特点,通过在服务端动态生成JSONP的响应,实现了跨域从而从而实现数据的交互。具体实现步骤如下: 客户端(例如:浏览器)请求包含一个回调函数名的url(例如:http://example.com/api?callback=fo…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部