Autocomplete 自动完成

功能：输入框在输入关键字后，根据输入的内容给出相关的下拉框供用户选择，自动完成输入内容。

插件：使用jqueryUI的自动完成小部件，文档地址：https://jqueryui.com/autocomplete/

API：文档链接：https://api.jqueryui.com/autocomplete/#option-source

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Autocomplete - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

jquery autocomplete 插件的使用的更多相关文章

  1. jquery autocomplete插件

    jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...

  2. Jquery autocomplete 插件示例

    通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...

  3. Jquery autocomplete插件的使用

    简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  4. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  5. jquery autoComplete 插件

    github: https://github.com/Pixabay/jQuery-autoComplete/blob/master/demo.html 官网demo https://goodies. ...

  6. Jquery autocomplete 插件使用

    轻松实现类似百度输入框联想功能: autocomplete 是一个很厉害的插件,该插件基于jquery,在jquery官网能下载到最新版本. 首先,jQuery UI 是基于 jQuery 的,所以, ...

  7. jquery autocomplete插件结合ajax使用

    <%@ page isELIgnored="false"%> <%@ page contentType="text/html; charset=UTF- ...

  8. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  9. [Jquery] Jquery AutoComplete的使用方法实例

    jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...

随机推荐

  1. Codeforces 679E - Bear and Bad Powers of 42（线段树+势能分析）

    Codeforces 题目传送门 & 洛谷题目传送门 这个 \(42\) 的条件非常奇怪,不过注意到本题 \(a_i\) 范围的最大值为 \(10^{14}\),而在值域范围内 \(42\) ...

  2. Codeforces 1158F - Density of subarrays（dp，神仙题）

    Codeforces 题目传送门 & 洛谷题目传送门 人生中第一道 *3500(显然不是自己独立 AC 的),不过还是祭一下罢 神仙 D1F 首先考虑对于给定的序列 \(a_1,a_2,\do ...

  3. Oracle-判断一个表的一列是否在另一张表的一列存在

    select * from A where exists(select 1 from B where A.a = B.b)  

  4. 学习java的第九天

    一.今日收获 1.java完全学习手册第二章程序流程控制中的顺序结构与选择结构 2.学习了java中选择的一些语句和关键词 二.今日问题 1.例题验证有错的情况 2.哔哩哔哩教学视频的一些术语不太理解 ...

  5. 自然语言式parsing

    got NUM(1) Is NUM(1) an expr? Is NUM(1) a term? Is NUM(1) a number? is_term got -(-) -(-) was back i ...

  6. day31 协程

    day31 协程 一.死锁与递归锁 ​ 所谓死锁:是指两个或者两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产 ...

  7. Spark基础：（五）Spark编程进阶

    共享变量 (1)累加器:是用来对信息进行聚合的,同时也是Spark中提供的一种分布式的变量机制,其原理类似于mapreduce,即分布式的改变,然后聚合这些改变.累加器的一个常见用途是在调试时对作业执 ...

  8. Scala(八)【面向对象总结】

    面向对象总结 面向对象 1.scala包 1.声明包 1.在文件第一行通过package 包名 2.package 包名{ .... } 第二种方法,包名只能在target目录才能看到 2.导入包 1 ...

  9. SpringCloud微服务实战——搭建企业级开发框架（三十二）：代码生成器使用配置说明

    一.新建数据源配置 因考虑到多数据源问题,代码生成器作为一个通用的模块,后续可能会为其他工程生成代码,所以,这里不直接读取系统工程配置的数据源,而是让用户自己维护. 参数说明 数据源名称:用于查找区分 ...

  10. Express中间件原理详解

    前言 Express和Koa是目前最主流的基于node的web开发框架,他们的开发者是同一班人马.貌似现在Koa更加流行,但是仍然有大量的项目在使用Express,所以我想通过这篇文章说说Expres ...