github:

  1. https://github.com/Pixabay/jQuery-autoComplete/blob/master/demo.html

官网demo

  1. https://goodies.pixabay.com/jquery/auto-complete/demo.html

cdn:

  1. <script src='//cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js'></script>
  2.  
  3. <link href='//cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.css' rel='stylesheet'>

我的demo:

参数1:term 为 文本框输入的内容

参数2:suggest 是一个核心函数,将字符串数组添加到自动完成的列表中  

  1. $(function()
  2. {
  3. $('#exampleInputAmount').autoComplete({
  4. minChars: 1,
  5. source: function(term, suggest){
  6. term = term.toLowerCase();
  7. var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
  8. var suggestions = [];
  9. for (i=0;i<choices.length;i++)
  10. if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
  11. suggest(suggestions);
  12. }
  13. });
  14. })

远程获取数据

1、term 为 文本框输入的内容

2、q为$_GET参数

3、这里回调的data已经通过JSON.parse处理过可以直接使用了

  1. $('#exampleInputAmount').autoComplete({
  2. minChars: 1,
  3. source: function(term, suggest)
  4. {
  5. term = term.toLowerCase();
  6. $.getJSON('?type=autoComplete', { q:term }, function(data){
  7. //console.log(JSON.stringify(data));
  8. console.log(data);
  9. });
  10. }
  11. });

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 插件使用

    轻松实现类似百度输入框联想功能: autocomplete 是一个很厉害的插件,该插件基于jquery,在jquery官网能下载到最新版本. 首先,jQuery UI 是基于 jQuery 的,所以, ...

  6. jquery autocomplete 插件的使用

    Autocomplete 自动完成 功能:输入框在输入关键字后,根据输入的内容给出相关的下拉框供用户选择,自动完成输入内容. 插件:使用jqueryUI的自动完成小部件,文档地址:https://jq ...

  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. Android -- ImageLoader简析

    图片的内存缓存实现 Image-Loader库有一个较完整的内存缓存实现,使用者可以根据需要选择已经实现的策略,也可以定制自己项目中需要的策略. 内存缓存实现代码在memory和memory.impl ...

  2. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  3. Tomcat gzip果然强大,js文件压缩率50%以上

    Tomcat配置使用gzip,在server.xml中 <Connector port="9098" protocol="HTTP/1.1" connec ...

  4. WordPress 后台评论如何自定义搜索条件

    大家都知道WordPress 作为一个非常成熟的博客系统,功能可以说是非常强大,几乎整个网站都可以进行定制开发,已经不算是一个博客系统了而应该是一个成熟的开发框架 最近就用WP给客户开发了一个网站,但 ...

  5. ORACLE关于锁表查询的部分SQL

    http://www.cnblogs.com/quanweiru/archive/2012/08/28/2660700.html --查询表空间名称和大小 SELECT UPPER (F.TABLES ...

  6. Loadrunner 11 遇到的问题

    环境 OS:windows 8.1 64bit LoadRunner版本:11 问题 1.  VuGen:开始录制后,火狐浏览器没有反应,不会弹出打开 可能原因一:浏览器版本太高. 解决方案: 1)卸 ...

  7. filezilla

    中文网站:https://www.filezilla.cn/ 英文网站:https://filezilla-project.org/ FileZilla 客户端是一个快速可靠的.跨平台的FTP,FTP ...

  8. 获取TrustedInstaller

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\runas] @="获取TrustedInstaller权限& ...

  9. google kaptcha 验证码组件使用简介

    kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.K ...

  10. Python之zip

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之zip #http://python.jobbole.com/82590/ #1)zip语法格 ...