官网  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. SICP 习题 （1.10）解题总结

    SICP 习题 1.10 讲的是一个叫“Akermann函数”的东西,去百度查可以查到对应的中文翻译,叫“阿克曼函数”. 就像前面的解题总结中提到的,我是一个数学恐惧者,看着稍微复杂一点的什么函数我就 ...

  2. ORACLE 查找字段在哪些表里存在

    查找不是主键的字段在哪些表里存在: select owner, table_namefrom dba_tab_columnswhere lower(column_name)='firstname'; ...

  3. Oracle 导入本地dmp文件 详细操作步骤

    以下操作均在命令行窗口中进行 /*连接数据库*/ C:\Users\hqbhonker>sqlplus / as sysdba SQL*Plus: Release 11.2.0.1.0 Prod ...

  4. Method Swizzle黑魔法，修改 ios 系统类库方法 SEL IMP

    Method Swizzle黑魔法,修改 ios 系统类库方法   版权声明:本文为博主原创文章,未经博主允许不得转载. 一般来说,系统提供的方法已经足够开发了,但是有的时候有些需求用普通方法不好做. ...

  5. HTML与CSS绘制简单DIV布局

    HTML代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  6. R与数据分析旧笔记（十一）数据挖掘初步

    PART 1 PART 1 传统回归模型的困难 1.为什么一定是线性的?或某种非线性模型? 2.过分依赖于分析者的经验 3.对于非连续的离散数据难以处理 网格方法 <Science>上的文 ...

  7. [转]printf 函数实现的深入剖析

    研究printf的实现,首先来看看printf函数的函数体 int printf(const char *fmt, ...) { int i; char buf[256];          va_l ...

  8. 快排 quicksort 快速排序

    首先看这个 http://www.cnblogs.com/morewindows/archive/2011/08/13/2137415.html 看完后就没有什么不理解的了... PS 注意 凡是在一 ...

  9. Html 小插件5 百度搜索代码2

    网页添加百度搜索框代码大全 ★ 用法:在下面选择合适的样式,复制代码到网页中相应位置粘贴即可. ★ 样式一(200×30)代码: <iframe id="baiduframe" ...

  10. 繁简转换OpenCC，autogb 和 autob5，iconv，python的jianfan包

    OpenCC OpenCC 是跨平台.多语言的开放中文转换库,除了基本的简繁转换功能外,用户还可以选择对不同用词习惯和异体字的处理方式. OpenCC 还提供方便的网页转换界面. OpenOffice ...