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. jmeter中执行kafka topic指令

    前置条件 kafka版本:2.2.1 jmeter版本:5.3 插件:ApacheJMeter_ssh-1.2.0.jar 1.拷贝 ApacheJMeter_ssh-1.2.0.jar 到/lib/ ...

  2. 洛谷 P4749 - [CERC2017]Kitchen Knobs（差分转换+dp，思维题）

    题面传送门 一道挺有意思的思维题. 首先有一个 obvious 的结论,就是对于每个炉子,要么转到哪里都符合条件,要么存在唯一的最大值.对于转到哪儿都符合条件的炉子我们 duck 不必考虑它,故我们只 ...

  3. R语言与医学统计图形-【24】ggplot位置调整函数

    ggplot2绘图系统--位置调整函数 可以参数position来调整,也有专门的函数position_*系列来设置. 位置函数汇总: 1.排列 并排排列 mean <- runif(12,1, ...

  4. jumpserver——脚本安装

    CentOS Linux release 7.7.1908 (Core) 3.10.0-1062.4.1.el7.x86_64 Initialize(){ yum update -y systemct ...

  5. js变量作为数组对象的键值方法

    js变量作为数组对象的键值方法,变量键值获取数组值 js也可以像php的数组一样用下标获取数组的值,方法是: var arr = {'key':'abc'}; var key = 'key'; con ...

  6. void * 指针和const 指针

    1.void * 是不能进行运算的,例如void *p  p++; 这2个值是没有任何规律的. 2 .printf的时候打印void *p 指向的数据,必须强制类型转换,因为编译器不知道取地址多少位. ...

  7. .NET SAAS 架构与设计 -SqlSugar ORM

    1.数据库设计 常用的Saas分库分为2种类型的库 1.1 基础信息库 主要存组织架构 .权限.字典.用户等 公共信息 性能优化:因为基础信息库是共享的,所以我们可以使用 读写分离,或者二级缓存来进行 ...

  8. 日常Java 2021/10/21

    Java Iterator(迭代器) 如果需要使用iterator类需要从java.util包中引入它 Java Iterator不是一个集合,它是一种访问集合的方法,用于迭代ArrayList和Ha ...

  9. SpringBoot Logback 日志配置

    目录 前言 日志格式 日志输出 日志轮替 日志级别 日志分组 小结 前言 之前使用 SpringBoot 的时候,总是习惯于将日志框架切换为 Log4j2,可能是觉得比较靠谱,也可能年龄大了比较排斥新 ...

  10. 报错:Unsupported field: HourOfDay

    报错:Unsupported field: HourOfDay 这个错误就比较搞笑也比较低级了. 代码如下 LocalDate now = LocalDate.now(); String year = ...