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. Android -- Fragment注意事项

    ViewPager+Fragment 让Fragment成为ViewPager的一页时,FragmentManager会一直保存管理创建好了的Fragment,即使当前不是显示的这一页,Fragmen ...

  2. matlab中find函数的使用说明

    matlab中如何统计一个矩阵M中零的个数 size(find(M==0),1) 原文:http://blog.sina.com.cn/s/blog_707b64550100rbh3.html fin ...

  3. isPostback 的原理及作用(很easy)

    1.IsPostBack用来推断表单是否是回发. (不是第一次请求),是点击表单的提交button回发过来的.是否是回发与get请求还是Post请求无关.可是普通情况下回发都是Post请求. 一般Ge ...

  4. Nuget出现错误怎么办?

        Go to the packages folder in the Windows Explorer and delete it. Open Visual Studio and Go to To ...

  5. svn自助改动password(PHP脚本实现)

    #创建脚本文件夹 mkdir -p /var/www/svn/svntools #创建apache配置文件 touch /etc/httpd/conf.d/alias.conf #输入下面内容: Al ...

  6. POJ--2449--Remmarguts&#39; Date【dijkstra_heap+A*】第K短路

    链接:http://poj.org/problem?id=2449 题意:告诉你有n个顶点,m条边.并把这些边的信息告诉你:起点.终点.权值.再告诉你s.t.k.需求出s到t的第k短路,没有则输出-1 ...

  7. android 动画具体解释(二)

    以下就開始学习属性动画的基本使用方法,我们来看属性动画的继承关系,例如以下如所看到的: 显然关注的焦点应该是ValueAnimator,ObjectAnimator这两个类啦,ObjectAnimat ...

  8. Android Studio中安装Genymotion模拟器

    Genymotion的安装: Genymotion无疑是目前最快最好用的模拟器.官网下载地址:https://www.genymotion.com/ 进到官网却找不到免费下载地址了,都需要money, ...

  9. VIM经常使用操作

    VIM使用 移动命令 按键 说明 h 左 l 右(小写L) j 下 k 上 w 移动到下一个单词 b 移动到上一个单词 进入插入模式 命令 说明 i 在当前光标处进行编辑 I 在行首插入 A 在行末插 ...

  10. VB LISTBOX属性

    additem 添加属性 listcount总记录数 listindex索引值 Private Sub Form_Load()List1.AddItem "广东省广州市"List1 ...