jquery-autocomplete学习

1.功能：

   实现根据关键字进行搜索功能，让一个input或textarea有autocomplete功能，类似百度和google的自动搜索功能；

2.代码示例：

（1）引入js和css文件

<script src="./jquery-1.3.2.js" type="text/javascript"></script>

<script src="./jquery.autocomplete.js" type="text/javascript"></script>

<link href="./jquery.autocomplete.css" />

（2）JS代码：

     $("#webServer").autocomplete({
 source: function(request, response) {
 $.ajax({
  url: "servlet/uiWebServer?keyValue="+request.term,
  type : "GET",
  dataType: "json",
  success: function(data) {
   response($.map(data.list, function(item) {
    return {
     label: item.sscWebServerAddress,
     value: item.sscWebServerAddress,
     sscWebServerId: item.sscWebServerId
    };
   }));
  },
  error: function(request,textStatus, errorThrown) {alert('fail');alert(errorThrown);}
 });
 },
});

（3）html代码：

 <input type="text" >

（4）数据格式：

{"list":[{"sscWebServerAddress":"127.0.0.1:8080","sscWebServerId":"10148","createdByUserLogin":null,"lastUpdatedByUserLogin":null,"createdStamp":"","lastUpdatedStamp":""},{"sscWebServerAddress":"127.0.0.1%3A18080","sscWebServerId":"10145","createdByUserLogin":null,"lastUpdatedByUserLogin":null,"createdStamp":"","lastUpdatedStamp":""},{"sscWebServerAddress":"127.0.0.1:18080","sscWebServerId":"10080","createdByUserLogin":null,"lastUpdatedByUserLogin":null,"createdStamp":"","lastUpdatedStamp":""}]

友情链接：