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. Qt5加载SVG格式的图片并更颜色

    QIcon MainWindow::qiconFromSvg(QString svg_path, QString color) { QPixmap img(svg_path); QPainter qp ...

  2. 洛谷 P4516 [JSOI2018]潜入行动

    题面传送门 一眼树形 \(dp\) 本题有 \(2\) 大难点. 难点之一是状态的设计,这里需要四维状态,\(dp[i][j][0/1][0/1]\) 表示在以 \(i\) 为根的子树内放了 \(j\ ...

  3. 富集分析DAVID、Metascape、Enrichr、ClueGO

    前言 一般我们挑出一堆感兴趣的基因想临时看看它们的功能,需要做个富集分析.虽然公司买了最新版的数据库,如KEGG,但在集群跑下来嫌麻烦.这时网页在线或者本地化工具派上用场了. DAVID DAVID地 ...

  4. mysql-计算排名

    mysql计算排名,获取行号rowno 学生成绩表数据 SELECT * FROM table_score ORDER BY score DESC; 获取某个学生成绩排名并计算该学生和上一名学生成绩差 ...

  5. 从 ClickHouse 到 ByteHouse：实时数据分析场景下的优化实践

    本文来自火山引擎公众号,原文发布于2021-09-06. 近日,字节跳动旗下的企业级技术服务平台火山引擎正式对外发布「ByteHouse」,作为 ClickHouse 企业版,解决开源技术上手难 &a ...

  6. C#时间选择

    <script type="text/javascript" src="http://www.shicishu.com/down/WdatePicker.js&qu ...

  7. linux系统中安装MySQL

    linux系统中安装MySQL 检查原来linux系统中安装的版本 rpm -qa | grep mysql 将其卸载掉 以 mysql-libs-5.1.71-1.el6.x86_64 版本为例 r ...

  8. A Child's History of England.52

    'Arthur,' said the King, with his wicked eyes more on the stone floor than on his nephew, 'will you ...

  9. Spark(一)【spark-3.0安装和入门】

    目录 一.Windows安装 1.安装 2.使用 二.Linux安装 Local模式 1.安装 2.使用 yarn模式 1.安装 2.使用 3.spark的历史服务器集成yarn 一.Windows安 ...

  10. DBeaver客户端工具连接Hive

    目录 介绍 下载安装 相关配置 1.填写主机名 2.配置驱动 简单使用 主题设置 字体背景色 介绍 在hive命令行beeline中写一些很长的查询语句不是很方便,急需一个hive的客户端界面工具 D ...