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. 洛谷 P6383 -『MdOI R2』Resurrection（DP）

    洛谷题面传送门 高速公路上正是补 blog 的时候,难道不是吗/doge,难不成逆在高速公路上写题/jy 首先形成的图显然是连通图并且有 \(n-1\) 条边.故形成的图是一棵树. 我们考虑什么样的树 ...

  2. LG 11 月 月赛 II T4

    LG 11 月 月赛 II T4 看到膜数和 $ 10^5 $ 以及 $ n^2 $ 的部分分想到很可能是 NTT 于是开始推式子 首先看到式子可以化作, 如果 \(k = 0\) , $ f(l , ...

  3. Linux关机/重启/用户切换/注销

    目录 1. 关机/重启命令 2. 用户切换/注销 2.1 基本说明 2.2 切换用户 2.3 注销用户 1. 关机/重启命令 # shutdown命令 shutdown -h now # 立即关机 s ...

  4. 8.深入TiDB：解析Hash Join实现原理

    本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/631 所谓 Hash Jo ...

  5. 详解 Rainbond Ingress 泛解析域名机制

    Rainbond 作为一款云原生应用管理平台,天生带有引导南北向网络流量的分布式网关 rbd-gateway.区别于一般的 Ingress 配置中,用户需要自行定义域名的使用体验,Rainbond 的 ...

  6. 巩固javaweb的第二十三天

    巩固内容: 调用验证方法 验证通常在表单提交之前进行,可以通过按钮的 onClick 事件,也可以通过 form 表单 的 onSubmit 事件来完成. 本章实例是通过 form 表单的 onSub ...

  7. A Child's History of England.31

    The English in general were on King Henry's side, though many of the Normans were on Robert's. But t ...

  8. Qt5的安装和编译

    Ubuntu18.04安装Qt5 1.配置unbuntu 和宿主机共享文件夹安装vmware-tools 2.下载 Qt  http://download.qt.io/archive/qt/ 3.修改 ...

  9. Hive相关知识点

    ---恢复内容开始--- 转载:Hive 性能优化 介绍 首先,我们来看看Hadoop的计算框架特性,在此特性下会衍生哪些问题? 数据量大不是问题,数据倾斜是个问题. jobs数比较多的作业运行效率相 ...

  10. go recover让崩溃的程序继续执行

    package main import ( "fmt" "log" ) func de() { //recover() //可以打印panic的错误信息 //f ...