学习jquery.autocomplete的使用

json格式的返回数据得用eva

 

数组 实现autocomplete功能 类似百度搜索框
后台 test.aspx 传回一串字符串给前台
var data = "Core |Selectors| Attributes |Traversing| Manipulation| CSS |Events Effects |Ajax Utilities ";
 Response.Clear();
    Response.Write(data);
    Response.End();
前台 用split()方法转为数组 注意要在页面增加一个ID为txtNameCn的文本框
        <script src=" http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src=" http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src=" http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src=" http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
      $(document).ready(function() {

//用ajax请求后台数据
      $.ajax({ type: "get", contentType: "application/json", url: "test.aspx", success: function(data) {
          var arr = data.split("|");//以|为分界线 将字符串转换为数组
          $("#txtNameCn").autocomplete(arr);
      } });
      // $("#txtNameCn").autocomplete(arr);
      });
  </script>

////////////////////////////////////////////////////////////////////

用json对象实现autocomplete功能

后台

返回json对象  [{ "NameCn": "莫西", "NameEn": "GLORY MERCY", "IMO": "9486568" }, { "NameCn": "东方606", "NameEn": "dongfang606", "IMO": "1061"}]

因为jquery将json对象识别为字符串,可以用eval()方法转换

在利用javascript内置的eval函数,将json格式的字符串转换成JS对象时,需要用一对"()"先将该字符串包住.
前台

  <script>
      $(document).ready(function() {
        $.ajax({
                  type: "get",
                  contentType: "application/json",
                  url: "returndata.aspx",
                  success: function(data) {
                      var data = eval("("+data+")");
                      $("#txtNameCn").autocomplete(data, {
                          minChars: 1,
                          matchContains: true,
                          autoFill: false,
                          formatItem: function(row, i, max) {
                              return i + "/" + max + ": \"" + row.NameCn;
                          },
                          formatMatch: function(row, i, max) {
                              return row.NameCn;
                          },
                          formatResult: function(row) {
                              return row.NameCn;
                          }
                      });
                      $("#txtNameEn").autocomplete(data, {
                          minChars: 1,
                          matchContains: true,
                          autoFill: false,
                          formatItem: function(row, i, max) {
                              return i + "/" + max + ": \"" + row.NameEn;
                          },
                          formatMatch: function(row, i, max) {
                              return row.NameEn;
                          },
                          formatResult: function(row) {
                              return row.NameEn;
                          }
                      });
                      $("#txtIMO").autocomplete(data, {
                          minChars: 1,
                          matchContains: true,
                          autoFill: false,
                          formatItem: function(row, i, max) {
                          return i + "/" + max + ": \"" + row.IMO;
                          },
                          formatMatch: function(row, i, max) {
                          return row.IMO;
                          },
                          formatResult: function(row) {
                          return row.IMO;
                          }
                      });
                  }
              })
          })
  </script>