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日

相关文章

  • 深入理解Node.js中的Worker线程

    深入理解Node.js中的Worker线程 Node.js中的Worker线程是用于在主线程外进行计算的工作线程。使用Worker线程可以避免应用程序被I/O阻塞,提高应用程序的响应能力。下面我们将介绍如何使用Worker线程来实现并行计算和I/O密集型任务。 创建Worker线程 创建Worker线程需要使用Node.js的内置模块worker_threa…

    JavaScript 2023年5月28日
    00
  • JavaScript 实现日期时间转时间戳

    当我们需要对日期和时间进行处理时,时间戳是一种非常常用的方式。在 JavaScript 中,我们可以通过一些简单的方法实现日期时间转时间戳的功能。下面是详细的攻略介绍: 步骤一:获取日期时间 首先,我们需要获取要转换为时间戳的日期和时间。我们可以使用 JavaScript 的内置 Date 对象来获取当前日期和时间。比如我们可以使用如下代码获取当前时间: c…

    JavaScript 2023年5月27日
    00
  • JavaScript定时器实现无缝滚动图片

    下面我来介绍一下如何使用JavaScript定时器实现无缝滚动图片的完整攻略。 实现思路 首先,我们需要明确我们要实现的功能:无缝滚动图片。那么,如何做到无缝呢?想必大家都知道,无缝滚动就是前面的图片轮廓从右边消失,后面的图片轮廓从左边补上去,这样的效果看起来就像是图片一直在匀速滚动一样。 因此,我们可以考虑将一排图片放在一个盒子里,利用定时器来操纵图片的位…

    JavaScript 2023年6月11日
    00
  • React Native中NavigatorIOS组件的简单使用详解

    下面我来详细讲解“React Native中NavigatorIOS组件的简单使用详解”的完整攻略。 什么是NavigatorIOS组件 NavigatorIOS是React Native中的一个内置组件,它提供了一个iOS导航栏,使我们的应用程序在iOS设备上更加便捷,用户可以轻松地在应用程序的页面之间进行导航操作。 如何在React Native中使用N…

    JavaScript 2023年6月11日
    00
  • JavaScript定时器用法

    JavaScript定时器是一种用于在指定时间间隔后执行代码的功能。在Web应用程序中,它们经常用于将动画效果与其他用户交互部分结合起来。本攻略将详细介绍JavaScript定时器,包括setTimeout和setInterval函数的用法。 setTimeout setTimeout函数允许我们在指定的时间间隔之后执行一段代码。以下是setTimeout函…

    Web开发基础 2023年3月30日
    00
  • JSON与JS对象的区别与对比

    JSON和JavaScript对象都是在Web应用程序中处理数据的重要方式。虽然它们看上去很相似,但它们有着不同的特性和适用场景。下面是关于JSON与JS对象的区别与对比的详细说明。 什么是JS对象? JS对象是一种数据类型。它是所有JS基本类型之一,可以通过定义一个变量并使用构造函数Object()来创建对象。例如: var person = new Ob…

    JavaScript 2023年5月27日
    00
  • js date 格式化

    当我们在使用Javascript时,经常需要对日期进行格式化操作。本篇攻略将介绍如何使用JS对日期进行格式化。 了解JS的Date对象 在进行日期格式化之前,我们需要先了解Javascript的Date对象。Date对象代表了时间戳,可以通过new操作符来实例化一个Date对象。例如: let now = new Date(); 使用toLocaleStri…

    JavaScript 2023年5月27日
    00
  • JavaScript Promise与async/await作用详细讲解

    JavaScript Promise与async/await作用详细讲解 Promise的概念及作用 Promise是ES6引入的一种异步编程的解决方案。Promise可以看作是一种容器,里面保存着一个异步操作的结果。Promise对象有三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。当Promise对象的状态从…

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