`
mhtbbx
  • 浏览: 36377 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery plugin: Autocomplete 参数及实例

阅读更多

1、jquery.autocomplete  API
  语法: autocomplete(url/data, [options] ) 
  参数: url / data:url或者数组          [options]:可选项   

2、[options]:可选项,选项解释如下: 

  minChars: 0,           //至少输入的字符数,default:1;如果设为0,在输入框内双击或者删除内容时显示列表。 

  width: 220,           //下拉框的宽度,default:input元素的宽度

  max: 10,            //下拉项目的个数,default:10

  scrollHeight: 300,       // 下拉框的高度, Default: 180

  scroll: true,            //当结果集大于默认高度时,是否使用滚动条,Default: true

  multiple: false,         //是否允许输入多个值. Default: false

  autoFill: false,          // 是否自动填充. Default: false

  multipleSeparator: " ",      //输入多个字符时,用来分开各个的字符. Default: ","

  matchCase:false,         //是否开启大小写敏感

  selectFirst:true,           // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true

  matchSubset:true,          //是否启用缓存

  cacheLength: 10,             //缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10

  delay: 20,             //击键后的延迟时间(单位毫秒).Default: 远程为400 本地10

  mustMatch:false,              //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除, Default: false

  matchContains:true,       //决定比较时是否要在字符串内部查看匹配.Default: false

  formatItem: function(row, i, max) { }

    //结果中的每一行都会调用这个函数,返回值将用LI元素包含,显示在下拉列表中. 三个参数(row, i, max): 返回的结果数组, 当前处理的行数(从1开始), 当前结果数组元素的个数. Default: none, 表示不指定自定义的处理函数.

  formatResult : function(row, i, max) { }

    //和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

  formatMatch: function(row) { }

    //对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

  result (function(event, data, formatted){}) //此事件会在用户选中某一项后触发,参数为:event: 事件对象, data: 选中的数据行,formatted:formatResult函数返回的值;

    例如: $("#d").result(function(event, data, formatted){alert(formatted);})

  extraParams (Object):

    //为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
复制代码

 

  3、实例:

<!DOCTYPE HTML >
<html>
<head>
<title>jquery.autocomplete.js 实例</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<style type="text/css">
    p{margin:8px;}
</style>
</head>

<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
<div id="content">
    <form autocomplete="off">
        <p>
            <label>City1:</label>
            <input type="text" id="city1" />
        </p>

        <p>
            <label>City2:</label>
            <input type="text" id="city2" />
        </p>
        
        <p>
            <label>Tags:</label>
            <input type="text" id='tags' />
        </p>
        <p>
            <label>E-Mail:</label>
            <input type="text" id="email" />
        </p>
    </form>
    <h3>Result:</h3> <ol id="result"></ol>
</div>
</body>
</html>

<script type="text/javascript">

$(function() {    
    var cities = [
        "Aberdeen", "Ada", "Beaverdam", "Bedford","Cuyahoga Falls", "Dayton", "De Graff", 
        "Fairfield", "Fairpoint", "Groveport", "Grover Hill","Hamden", "Hamersville", "Irondale", "Ironton", 
        "Jacksontown","Kirby", "Kirkersville", "Lafayette", "Lafferty", "Munroe Falls", "Murray City",
        "Oberlin", "Oceola", "Paris", "Parkman", "Ravenna", "Rawson", "Saint Louisville", 
        "Toledo", "Tontogany", "Wakeman", "Walbridge", "Yorkshire", "Yorkville", "Zoar"
    ];
    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" }
    ];

    $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"]);
    
    $("#city1").autocomplete(cities);

    $("#city2").autocomplete(cities, {
        
        minChars: 0,        //至少输入的字符数,default:1;

        width: 220,            //下拉框的宽度,default:input元素的宽度

        max: 10,            //下拉项目的个数,default:10

        scrollHeight: 300,    // 下拉框的高度, Default: 180 

        scroll: true,        //当结果集大于默认高度时,是否使用滚动条,Default: true

        multiple: false,    //是否允许输入多个值. Default: false

    });

    $("#email").autocomplete(emails, {
        minChars: 0,
        width: 310,
        matchContains: "word",
        autoFill: false,
        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;
        }
    });

    function log(event, data, formatted) {
        $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
    }
    $(":text").result(log)    //被选中的插入Result

});    
</script>    
分享到:
评论

相关推荐

    jquery Autocomplete插件,搜索自动完成

    jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery plugin: Tooltip(转)

    1. **引入资源**:在HTML中添加jQuery库和Tooltip插件的JS及CSS文件。 2. **初始化插件**:在文档加载完成后(通常在`$(document).ready()`函数内),调用插件的初始化函数,指定选项,如是否自动从`title`属性获取...

    flannel-cni-plugin:v1.0.0

    flannel-cni-plugin-1.0.0镜像

    jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile 源码

    、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。

    Maven更新失败,Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1

    Maven更新问题 今天Maven在更新的时候发现一直更新不成功,总结下解决方法。 在apache-maven-3.5.2/conf/setting.xml中加入以下配置即可解决 alimaven aliyun maven ... central junit junit Address/ ...

    240多个jQuery插件

    6. Farbtastic jQuery Color Picker Plugin:色彩选取器。 7. Color Picker by intelliance.fr:颜色选择组件。 **投票插件**: 1. jQuery Star Rating Plugin:星级评分。 2. jQuery Star Rater:星评系统。 3. ...

    jQuery Autocomplete plugin(自动完成插件) 1.1.zip

    jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...

    JQuerry 插件介绍

    - jQuery Form’n Field plugin:进一步增强表单处理。 - jQuery Checkbox manipulation:控制复选框的行为。 - jTagging:实现标签输入功能。 - jQuery labelcheck:使标签更具交互性。 - Overlabel:让标签...

    jquery 英文教程 jQuery Plugin Development Beginner’s Guide PDF

    jquery 的经典 英文书 jQuery Plugin Development Beginner’s Guide.PDF

    jquery-treeview

    要使用jQuery Treeview,首先需要引入jQuery库和treeview的CSS及JS文件。在HTML文件中,创建一个`&lt;ul&gt;`列表,然后通过jQuery的选择器和`treeview()`方法将其转换为树形结构: ```html &lt;!DOCTYPE html&gt; ...

    jquery-autocomplete文档

    1. **官方网站**:访问官方网站 [http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/](http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) 获取最新信息。 2. **版本要求**:当前...

    Align-jQuery-Plugin:用于将元素相对于另一个元素对齐的 jQuery 插件

    对齐 jQuery 插件Align 插件建立在函数的基础上,以对齐一个或多个元素在它们的偏移父元素上。用法 .align( options )options :传递给方法的附加选项的映射。 支持的键: 容器:要与之对齐的 DOM 对象。 默认 = 父...

    jquery-plugin

    jquery-plugin:开发Jquery插件的简单示例,

    jQuery插件教程(搜罗了全部插件).docx

    - ShiftCheckbox jQuery Plugin:通过键盘快捷键操作复选框。 - jQuery Checkbox (checkboxes with images):用图片替换复选框。 - jQuery SpinButton Control:数字输入框,带上下箭头按钮。 - jQuery Ajax ...

    表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7

    表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本

    jQuery Media Plugin Demo

    jQuery Media Plugin是一款专门为jQuery设计的多媒体插件,用于在网页中轻松集成音频、视频和图像等多媒体元素。这款插件的出现,极大地简化了开发者在HTML5时代处理多媒体内容的复杂性,使得开发者无需深入了解...

    JQuery validation plugin学习资料

    **jQuery Validation Plugin 知识详解** jQuery Validation Plugin 是一个用于前端表单验证的强大工具,它为jQuery用户提供了方便快捷的方法来验证用户输入的数据,确保数据的准确性和完整性。这个插件能够帮助...

    Maven报错: Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.0.2:resources

    idea创建Maven项目时,报错显示Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.0.2:resources,并且Maven插件内看不到 mybatis-generator。如下图: 折腾了好久发现配置放错地方了,...

    jQuery Validation Plugin:jQuery 验证插件库源-开源

    jQuery Validation Plugin 为您现有的表单提供插入式验证,同时使各种自定义以适合您的应用程序非常容易。 这个 jQuery 插件使简单的客户端表单验证变得容易,同时仍然提供大量的自定义选项。 如果您要从头开始构建...

Global site tag (gtag.js) - Google Analytics