jQuery.ui autoComplete使用

官网 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使用

最新文章

热门文章