Autocomplete 自动完成

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

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

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>jQuery UI Autocomplete - Default functionality</title>
  7.   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  8.   <link rel="stylesheet" href="/resources/demos/style.css">
  9.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  10.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  11.   <script>
  12.   $( function() {
  13.     var availableTags = [
  14.       "ActionScript",
  15.       "AppleScript",
  16.       "Asp",
  17.       "BASIC",
  18.       "C",
  19.       "C++",
  20.       "Clojure",
  21.       "COBOL",
  22.       "ColdFusion",
  23.       "Erlang",
  24.       "Fortran",
  25.       "Groovy",
  26.       "Haskell",
  27.       "Java",
  28.       "JavaScript",
  29.       "Lisp",
  30.       "Perl",
  31.       "PHP",
  32.       "Python",
  33.       "Ruby",
  34.       "Scala",
  35.       "Scheme"
  36.     ];
  37.     $( "#tags" ).autocomplete({
  38.       source: availableTags
  39.     });
  40.   } );
  41.   </script>
  42. </head>
  43. <body>
  45. <div class="ui-widget">
  46.   <label for="tags">Tags: </label>
  47.   <input id="tags">
  48. </div>
  50. </body>
  51. </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. CF1540B Tree Array

    先写一下自己想到的部分: 考虑枚举一个根. 计算一个点对出现的概率. 对于我这种期望概率基本不会的人,差点就把这题切了. 自己想到的部分都没有假. 问题在于: 如何计算一个点对出现的概率. 考虑和这两 ...

  2. android listview展示图片

    最近学习android开发,感触颇多,和网站开发对比,还是有很大的差距,在这里记录一下. android listview展示图片 在网站开发上,展示图片非常简单,一个HTML img标签就搞定,加上 ...

  3. Oracle-创建新表，创建备份表，对表中插入多条数据

    一.创建新表 0.基本语法 create table 表名称(id varchar2(50) primary key ,name char(200) not null,phone number(11) ...

  4. 质量体系建设之路---可视化的MockServer

    一. 背景 福禄网络作为一家数字权益商品及服务提供商,覆盖了我们衣食住行的各种生活场景的权益内容,对接了如支付宝.京东.银行APP各种渠道,如何能够快速的响应渠道需求,提供稳定的接口服务,这就要求我们 ...

  5. SCRDet——对小物体和旋转物体更具鲁棒性的模型

    引言 明确提出了三个航拍图像领域内面对的挑战: 小物体:航拍图像经常包含很多复杂场景下的小物体. 密集:如交通工具和轮船类,在航拍图像中会很密集.这个DOTA数据集的发明者也提到在交通工具和轮船类的检 ...

  6. MySQL8.0配置文件详解

    mysql8.0配置文件一.关键配置1. 配置文件的位置 MySQL配置文件 /etc/my.cnf 或者 /etc/my.cnf.d/server.cnf几个关键的文件:.pid文件,记录了进程id ...

  7. A Child's History of England.14

    At first, Elfrida possessed great influence over the young King, but, as he grew older and came of a ...

  8. 从分布式锁角度理解Java的synchronized关键字

    分布式锁 分布式锁就以zookeeper为例,zookeeper是一个分布式系统的协调器,我们将其理解为一个文件系统,可以在zookeeper服务器中创建或删除文件夹或文件.设D为一个数据系统,不具备 ...

  9. linux 常用清空文件方法

    1.vim 编辑器 vim /tmp/file :1,$d  或 :%d 2.cat 命令 cat /dev/null > /tmp/file

  10. vue-cli4脚手架搭建三

    组件传值 <script> import LunBo from "./LunBo"; export default { name: 'Home', components ...