zoukankan      html  css  js  c++  java
  • Jquery的AutoComplete插件初级使用

    前台代码:

    <head runat="server">
    <title></title>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="js/jquery.autocomplete.min.js" type="text/javascript"></script>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">


    $(
    function () {
    $(
    '#keyword').autocomplete("Default.aspx", {//Default.aspx是后台处理页面
    max: 12, //列表里的条目数
    minChars: 0, //自动完成激活之前填入的最小字符
    400, //提示的宽度,溢出隐藏
    scrollHeight: 300, //提示的高度,溢出显示滚动条
    matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
    autoFill: false, //自动填充
    multiple: true, //是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
    multipleSeparator: ",", //如果是多选时,用来分开各个选择的字符. Default: ","
    //需要把data转换成json数据格式
    parse: function (data) {
    return $.map(eval(data), function (row) {
    return {
    data: row,
    value: row.name,
    //result: row.name + " <" + row.to + ">"
    result: row.name
    }
    });
    },
    formatItem:
    function (row, i, max) {
    return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
    },
    formatMatch:
    function (row, i, max) {
    return row.name + row.to;
    },
    formatResult:
    function (row) {
    return row.to;
    }
    }).result(
    function (event, row, formatted) {
    alert(row.to);
    });
    });

    </script>
    </head>
    <body>
    <form id="form2" runat="server">
    &nbsp; &nbsp;数据库中提出:
    <asp:TextBox runat="server" ID="autocom"></asp:TextBox>
    <input id="keyword" />
    <input id="getValue" value="GetValue" type="button" />
    <!--<input type="text" id="autocom" />-->
    <div id="content">
    </div>
    </form>
    </body>

      后台代码:

    protected void Page_Load(object sender, EventArgs e)
    {
    //bool flag = true;
    //Response.Write(flag ? "1" : "0");

    Response.Clear();
    Response.Charset
    = "utf-8";
    Response.Buffer
    = true;
    this.EnableViewState = false;
    Response.ContentEncoding
    = System.Text.Encoding.UTF8;
    Response.ContentType
    = "text/plain";
    Response.Write(GetLikeUserName());
    Response.Flush();
    Response.Close();
    Response.End();
    }


    private string GetLikeUserName()
    {
    string param = Request.QueryString["q"].ToString();//获取参数

    string[] str = { "January", "Ceshi", "jQuery", "josn", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    StringBuilder sbstr
    = new StringBuilder();
    sbstr.Append(
    "[");
    for (int i = 0; i < str.Length; i++)
    {
    if (str[i].Contains(param))
    {
    if (i == str.Length - 1)
    {
    sbstr.Append(
    "{name:'" + str[i] + "',to:'最后中文测试" + i + "'}");
    }
    else
    {
    sbstr.Append(
    "{name:'" + str[i] + "',to:'中文测试" + i + "'},");
    }
    }
    }
    sbstr.Append(
    "]");

    return sbstr.ToString();
    }

      

  • 相关阅读:
    面试题3
    面试题2
    (原)python爬虫入门(2)---排序爬取的辽宁科技大学热点新闻
    (原)python爬虫入门(1)---爬取辽宁科技大学相关新闻
    Classic Abstract Data Types--C
    面试题1
    (原)----2叉查找树 in C
    《 Trees and Graphs》----CCI_Q4.6
    EasyUI 弹出window子页面,选中某条数据回调给父页面并关闭子页面
    跨域问题解决
  • 原文地址:https://www.cnblogs.com/Soulless/p/Jquery.html
Copyright © 2011-2022 走看看