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 1208F - Bits And Pieces（高维前缀和）

    题面传送门 题意:求 \(\max\limits_{i<j<k}a_i|(a_j\&a_k)\). \(1\leq n \leq 10^6,1\leq a_i\leq 2\time ...

  2. 【机器学习与R语言】7-回归树和模型树

    目录 1.理解回归树和模型树 2.回归树和模型树应用示例 1)收集数据 2)探索和准备数据 3)训练数据 4)评估模型 5)提高模型性能 1.理解回归树和模型树 决策树用于数值预测: 回归树:基于到达 ...

  3. 远程登录Linux系统及上传下载文件

    目录 1. 远程登录Linux系统 1.1 为什么要远程登录 1.2 Xshell6安装 1.3 连接登录 1.3.1 连接前提 1.3.2 Xshell连接配置 2. 远程上传下载文件 2.1 Xf ...

  4. php header下载文件 无法查看原因

    php header下载文件 无法查看原因 php header下载文件 下方函数可以下载单个文件 function download($file_url){ if(!isset($file_url) ...

  5. JAVA写入TXT

    用java生成txt文件有两种方式: 1)是通过字符流(或字节流): 2)是直接调用PrintWriter类. 具体实现过程如下: 1)字符流(字节流) 代码如下: import java.io.Fi ...

  6. 生产调优1 HDFS-核心参数

    目录 1 HFDS核心参数 1.1 NameNode 内存生产配置 问题描述 hadoop-env.sh中配置 1.2 NameNode 心跳并发配置 修改hdfs-site.xml配置 1.3 开启 ...

  7. ctfshow WEB入门 信息收集 1-20

    web1 题目:开发注释未及时删除 查看页面源代码即可 web2 题目:js把鼠标右键和f12屏蔽了 方法一: 禁用JavaScript 方法二: url前面加上view-source: web3 题 ...

  8. 【PS算法理论探讨一】 Photoshop中两个32位图像混合的计算公式（含不透明度和图层混合模式）。

    大家可以在网上搜索相关的主题啊,你可以搜索到一堆,不过似乎没有那一个讲的很全面,我这里抽空整理和测试一下数据,分享给大家. 我们假定有2个32位的图层,图层BG和图层FG,其中图层BG是背景层(位于下 ...

  9. absorb

    absorb 物理的absorb比较直观.被书本/知识absorb也好理解.涉及到money/time时有点抽象,但汉语也有"吸金"的说法,consume, use up.可以吸收 ...

  10. [Emlog主题] Monkey V3.0 优化修改

    原作者博客:https://blog.dyboy.cn/ Monkey V3.0 优化修改版 修改说明: 背景颜色修改(按个人喜好可自行修改,仿PCQQ午夜巴黎皮肤) 搜索框按钮样式优化,不那么突兀了 ...