zoukankan      html  css  js  c++  java
  • autocomplete的使用

    autocomplete使用分为本地调用方法和读取远程读取数据源的方法

    (1)本地调用方法

     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    

    <link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />    

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

    <script type="text/javascript">               

    var emails = [

    { name: "Peter Pan", to: "peter@pan.de" }, 

     { name: "Molly", to: "molly@yahoo.com" },             

    { name: "Forneria Marconi", to: "live@japan.jp" },             

    { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },             

    { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },             

    { name: "Don Corleone", to: "don@vegas.com" },             

    { name: "Mc Chick", to: "info@donalds.org" },             

    { name: "Donnie Darko", to: "dd@timeshift.info" },             

    { name: "Quake The Net", to: "webmaster@quakenet.org" },             

    { name: "Dr. Write", to: "write@writable.com" },             

    { name: "GG Bond", to: "Bond@qq.com" },             

    { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }  ];

                 $(function ()  

          {

                     $('#txt').autocomplete(emails, {

                         max: 12,    //列表里的条目数

                         minChars: 1,    //自动完成激活之前填入的最小字符,如果为0,则双击时显示全部

                         400,     //提示的宽度,溢出隐藏

                         scrollHeight: 300,   //提示的高度,溢出显示滚动条

                         matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示

                         autoFill: false,    //自动填充

                         formatItem: function (row, i, max)

                         {

                             return  row.name;

                         },

                         formatMatch: function (row, i, max)

                         {

                             return row.name;

                         },

                         formatResult: function (row)

                         {

                             return row.name;

                         }

                     });

                 });

        </script>

        <input type="text" id="txt" />

    (2)远程调用数据源的方法

    后台.js

      ViewState["data"]="[{ name: "Peter Pan"},{ name: "Molly"},{ name: "Forneria Marconi"},{ name: "Don Corleone"}]";

    前台

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    

    <link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />    

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

    <script type="text/javascript">               

                 $(function ()  

          {

                     var data = '<%= ViewState["data"] %>';

                     var da = eval('(' + data + ')');

                     $('#txt').autocomplete(da, {

                         max: 12,    //列表里的条目数

                         minChars: 1,    //自动完成激活之前填入的最小字符,如果为0,则双击时显示全部

                         400,     //提示的宽度,溢出隐藏

                         scrollHeight: 300,   //提示的高度,溢出显示滚动条

                         matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示

                         autoFill: false,    //自动填充

                         formatItem: function (row, i, max)

                         {

                             return  row.name;

                         },

                         formatMatch: function (row, i, max)

                         {

                             return row.name;

                         },

                         formatResult: function (row)

                         {

                             return row.name;

                         }

                     });

                 });

        </script>

        <input type="text" id="txt" />

  • 相关阅读:
    nginx 禁止访问某个目录
    ssh 无法链接的解决思路
    linux 时间修改(同步到时间服务器)
    BitNami Gitlab的重启问题
    gitlab push时报错
    VirtualBox 安装centos后无法上网
    VirtualBox 创建64位系统的问题
    NOIP2010 题解
    NOIP2011 题解
    NOIP2012 题解
  • 原文地址:https://www.cnblogs.com/cyit/p/4319309.html
Copyright © 2011-2022 走看看