zoukankan      html  css  js  c++  java
  • 学习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>
  • 相关阅读:
    在Cortex-M系列上如何准确地做us级延时?
    [嵌入式开发]Linux性能分析——上下文切换
    cnless.sh:改进版less,可自动识别GBK编码或UTF-8编码。
    PuTTY配置
    LINUX内核笔记:自旋锁
    Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
    elementUi中input输入字符光标在输入一个字符后,光标失去焦点
    elementUi中的计数器ele-mumber中的change事件传参及事件调用
    如何使用git拉取代码及提交代码(详细)
    git 拉取远程代码
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1926022.html
Copyright © 2011-2022 走看看