jQuery UI 实例 - 自动完成（Autocomplete）

浏览数：77 / 时间：2015年06月09日

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>
        $(document).ready(function(){
              $( "#tags" ).autocomplete({
                  source:function(request,response){
                      var  url =encodeURI("http://apis.map.qq.com/ws/place/v1/suggestion/?keyword="+request.term+"&region=北京&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5&output=jsonp&callback=?");
                      var  arr=[];
                      $.getJSON(url,function(result){
                          var item=result.data;
                          $(item).each(function(index,value){
                             var obj={ label:item[index].title+"  "+"aa",value:item[index].title};
                              arr.push(obj);
                          })
                          response(arr);
                      });
                      //var data=[ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby",request.term];
                      //response(data);
                  }
              });
         })
    </script>
</head>
<body>
<input id="tags" type="text" style="width: 200px;">
<button type="button" id="sure">确定</button>
</body>
</html>