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/

 

 

posted @ 2013-09-04 22:52  cart55free99  阅读(275)  评论(0)  编辑  收藏  举报