github:

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

官网demo

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

cdn:

<script src='//cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js'></script>

<link href='//cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.css' rel='stylesheet'>

我的demo:

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

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

$(function()
{
$('#exampleInputAmount').autoComplete({
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
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'];
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
}
});
})

远程获取数据

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

2、q为$_GET参数

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

    $('#exampleInputAmount').autoComplete({
minChars: 1,
source: function(term, suggest)
{
term = term.toLowerCase();
$.getJSON('?type=autoComplete', { q:term }, function(data){
//console.log(JSON.stringify(data));
console.log(data);
});
}
});

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. [Functional Programming 101] runWIth, evalWith, execWith

    Recentlly, I am learning crocks.js ADT libaray. In the beginning, it is hard to understand when to u ...

  2. 小米电视支付SDK接入air坑爹之路

    1. air的包名在生成android后会加入一个air的前缀变为air.***.***.mibox.包名与appid和appkey必须相相应才行,不然会一直返回40000错误 2. 加入了Nativ ...

  3. 自定义cas客户端核心过滤器AuthenticationFilter

    关于cas客户端的基本配置这里就不多说了,不清楚的可以参考上一篇博文:配置简单cas客户端.这里是关于cas客户端实现动态配置认证需要开发说明. 往往业务系统中有些模块或功能是可以不需要登录就可以访问 ...

  4. 【CSWS2014 Main Conference】Some Posters

    随机选了几张POSTER,之前没做过POSTER的同学可以看一下文字.图片.布局以及每个版块的小标题,以后如果需要做poster就容易多了. 据说这种Poster一张需要60RMB左右. 其中第5幅是 ...

  5. JSTL详解(一)

    将jstl.jar包导入到工程中 jstldemo1.jsp <%@ taglib prefix="c" uri="http://java.sun.com/jsp/ ...

  6. IOS 将公历日期转换为中国农历

    代码方法: //日期阳历转换为农历: - (NSString *)convertDateToNongLi:(NSString *)aStrDate { NSDate *dateTemp = nil; ...

  7. TQ2440 LCD试验失败经验教训

    试验环境:TQ2440开发板(配套TQ4.3寸屏) 试验参考书目:<ARM处理器裸机开发实战--机制而非策略>(以下简称<裸机开发实战>) <裸机开发实战>第13章 ...

  8. 怎样以Root方式执行Xcode

    粗略算一下,在第一次接触OSX的时候,我接触Windows已经有14年,刚開始用OSX和Xcode各种不习惯.可是用Xcode写了一星期的代码,我却有一种想把Windows和VS扔了的感觉(真的用着非 ...

  9. heap与stack的差

    本文内容来源于<程序猿面试宝典>第三版. 在进行C/C++编程时.常常将操作的内存分下面几个类别: 栈区(stack):由编译器自己主动分配和释放,存放函数的參数值.局部变量的值等. 其操 ...

  10. 通过jdbc使用PreparedStatement,提升性能,防止sql注入

    为什么要使用PreparedStatement? 一.通过PreparedStatement提升性能 Statement主要用于执行静态SQL语句,即内容固定不变的SQL语句.Statement每执行 ...