官网  http://api.jqueryui.com/autocomplete/#option-source

参考了 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html 写的很好 大家去看看

首先要说明的是 如果在网上直接搜索 autocomplete 的话  会得到很多不同的插件

比如这个页面http://www.open-open.com/ajax/AutoComplete.htm  相同功能的插件有3页

我这里用的时 jQuery.ui 下的一个补全插件

下面用三种方式获取

一种是静态数据  一种是远程的写好的静态json格式数据  还有一种是后台根据输入的不同数据返回不同的值

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Autocomplete - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/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>

  <div class="ui-wight">

    <label for="jsonp">rakusTag</label>

    <input id="jsonp"/>&nbsp;&nbsp;&nbsp;下面有指定参数  输入的字符最小是2个才开始传送数据

  </div>

  <script type="text/javascript">

  $(function(){

    $("#jsonp").autocomplete({

      source: function(request, response) {

        $.ajax({

          url: "http://ws.geonames.org/searchJSON",

          dataType: "jsonp",

          data: {

            featureClass: "P",

            style: "full",

            maxRows: 12,

            name_startsWith: request.term

          },

          success: function(data) {

            response($.map(data.geonames, function(item) {

              return {

                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

                value: item.name

              }

            }));

          }

        });

      },

      minLength: 2

    });

  });

  </script>

  <div class="ui-wight">

    <label for="find_group_ac">rakusTag</label>

    <input id="find_group_ac"/>

  </div>

  <script type="text/javascript">

  $(function(){

    $("#find_group_ac").autocomplete({

      source: function(request, response) {

        $.ajax({

          url: "autocomplete.php",

          dataType: "json",

          data: {

              term: request.term

          },

          success: function(data) {

            response($.map(data.items, function(item) {

              return {

                label: item.name,

                value: item.name

              }

            }));

          }

        });

      },

      minLength: 1

    });

  });

  </script>

</body>

</html>

后台

<?php

$val=$_REQUEST['term'];

$ret="";

function StartsWith($Haystack, $Needle){

    return strpos($Haystack, $Needle) === 0;

}

if(StartsWith($val,'a')){

    $ret="{\"items\":[{\"name\":\"ACC\",\"description\":\"desc\"},{\"name\":\"acm\",\"description\":\"desc\"},{\"name\":\"array\",\"description\":\"desc\"}]}";

    if(strpos($val,'ac')!==false){

        // echo 'ac';

        $ret="{\"items\":[{\"name\":\"ACC\",\"description\":\"desc\"},{\"name\":\"acm\",\"description\":\"desc\"}]}";

        if(strpos($val,'acc')!==false){

            // echo 'acc';

            $ret="{\"items\":[{\"name\":\"ACCR\",\"description\":\"desc\"},{\"name\":\"according\",\"description\":\"desc\"}]}";

        }

    }

}else if(StartsWith($val,'b')){

    $ret="{\"items\":[{\"name\":\"base\",\"description\":\"desc\"},{\"name\":\"bonni\",\"description\":\"desc\"},{\"name\":\"boot\",\"description\":\"desc\"}]}";

}else if(StartsWith($val,'c')){

    $ret="{\"items\":[{\"name\":\"candy\",\"description\":\"desc\"},{\"name\":\"clone\",\"description\":\"desc\"},{\"name\":\"crocs\",\"description\":\"desc\"}]}";

}else {

    $ret="";

}

echo $ret;

?>

最后送一个 检查json数据 是否正确的工具  http://jsonlint.com/

jQuery.ui autoComplete使用的更多相关文章

  1. jQuery UI AutoComplete的使用

    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...

  2. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  3. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  4. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  5. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  6. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  7. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框

    $("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...

  9. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

随机推荐

  1. Android图片裁剪之自由裁剪

    我的博客http://blog.csdn.net/dawn_moon 客户的需求都是非常怪的.我有时候在给客户做项目的时候就想骂客户是sb.可是请你相信我,等你有需求,自己变成客户的时候,给你做项目的 ...

  2. Extjs4 操作TreeStore 处理proxyAjax 获取的数据

    近期在搞extjs4 TreeStore时有一个需求 就是要处理一下后台传过来的json数据然后再显示,看api也没有找到解决的方法 ,最后看源代码在Ext.data.proxy.Server 看到这 ...

  3. 用ADB(Android Debug Bridge)实时监测Android程序的运行

      监控Android设备上程序的运行,需要ADB的配合,具体ADB工具的介绍以及命令选项可见博客: http://blog.csdn.net/mliubing2532/article/details ...

  4. md笔记——微信JS接口

    微信js接口 隐藏微信中网页右上角按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { Weix ...

  5. Html5 自定义数据属性

    html5 可以为元素添加自定义属性,但是要添加前缀data-.(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname ...

  6. vlan trunk vtp端口聚合

    第一步:端口聚合(两端都需要做相同的操作) 第二步:在服务器端配置为服务器模式 第四步:在服务器端添加vlan 第五步:在两端分别将不同的端口添加到不同的vlan

  7. php采集文章中的图片获取替换到本地

    /** * 获取替换文章中的图片路径 * @param string $xstr 内容 * @param string $keyword 创建照片的文件名 * @param string $oriwe ...

  8. 数据库MySQL多个数据库服务冲突

    一.目标名称 MySQL 二.目标版本 mysql-5.6.24-win32.1432006610.zip 三.环境信息 系统:windows 7 旗舰版 防火墙:关闭  —— 注意:如果防火墙不关闭 ...

  9. 兼容现有jQuery API的轻量级JavaScript库：Zepo

    Zepo是一个JavaScript框架,其特点是兼容现有jQuery API的同时,自身体积十分小:它与jQuery有着类似的API.如果你会jQuery,那么也就会使用Zepto了. $('div' ...

  10. codeforces 617E. XOR and Favorite Number 莫队

    题目链接 给n个数, m个询问, 每次询问问你[l, r]区间内有多少对(i, j), 使得a[i]^a[i+1]^......^a[j]结果为k. 维护一个前缀异或值就可以了. 要注意的是 区间[l ...