官网  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. Swift学习笔记：类和结构

    一.类和结构的异同 类和结构有一些相似的地方.它们都能够: 1. 定义一些能够赋值的属性: 2. 定义具有功能性的方法 3. 定义下标.使用下标语法 4. 定义初始化方法来设置初始状态 5. 在原实现 ...

  2. codefirst初尝试

    Code First 约定 借助 CodeFirst,可通过使用 C# 或Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code Firs ...

  3. 获取第下一个兄弟元素 屏蔽浏览器的差异（nextElementsibling）

    //获取element下一个兄弟元素 function getNextElementSibling(element){ //能力检测 判断是否支持nextElementSibling if(eleme ...

  4. vs2012新建项目产生的问题

    当用vs新建web项目时遇到

  5. Nutch

    nutch 插件开发[资料整理]:http://my.oschina.net/cloudcoder/blog/472915 Nutch2.3+Mongodb+ElasticSearch:http:// ...

  6. JavaSE思维导图(五)

  7. Oracle操作数据库oracleHelper

    1 Oracle OracleHelper //============================================================================ ...

  8. 大写String和小写string的区别

    1.string是c#中的类,String是.net Framework的类(在c# IDE中不会显示蓝色) ; 2.c# string映射为.net Framework的String ; 3.如果用 ...

  9. Jquery中的delegate()使用方法介绍

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数 delegate定义和用法 delegate() 方法为指定的元素(属于被选 ...

  10. 使用jquery控制display属性

    //隐藏 $("#id").css('display','none'); //显示 $("#id").css('display','block'); 或 $(& ...