`
longgangbai
  • 浏览: 7325717 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自动完成插件 autocomplete

阅读更多

自动完成插件 autocomplete
autocomplete插件能帮助我们实现类似于Google Suggest的效果:

 

插件首页:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

插件文档:

http://docs.jquery.com/Plugins/Autocomplete

配置说明:

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions

1.应用实例
本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:

 

实例代码:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery PlugIn - 自动完成插件实例 AutoComplete </title>
    <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
    <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />
    <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.css"%>" />
    <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script>
    <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script>
    <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.min.js"></script>
    <% if (false)
       {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
    <% }%>
    <script type="text/javascript">
        /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
    </script>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
       
        .formLabel{float: left; width: 150px; text-align:right;}
        .formInput{float: left;}
    </style>
</head>
<body>
    <!-- Demo. 应用AutoComplete插件 -->
    <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
        <h3>
            Demo. 应用AutoComplete插件 </h3>
        <br style="clear: both" />
        <div class="formLabel">
            <label for="inputCityName">请输入城市拼音和汉字:</label>
        </div>
        <div class="formInput">
            <input id="inputCityName" name="inputCityName" type="text" />
        </div>
        <br style="clear:both" />
        <br style="clear: both" />
        <div class="formLabel">
            <label for="inputCityName">城市ID:</label></div>
        <div class="formInput">
            <input id="inputCityId" name="inputCityId" type="text" /></div>
        <br style="clear: both" />
        <br style="clear: both" />
    </div>
    <script type="text/javascript">
        /*==========用户自定义方法==========*/
        //城市数据
        var cityList;
        //autocomplete选项
        var options = {
            minChars: 1,
            max: 500,
            width: 250,
            matchContains: true,
            formatItem: function(row, i, max)
            {
                return i + "/" + max + ": \"" + row.CityNameEn + "\" [" + row.CityName + "]";
            },
            formatMatch: function(row, i, max)
            {
                return row.CityNameEn + " " + row.CityName;
            },
            formatResult: function(row)
            {
                return row.CityName;
            }           
        };
        //autocomplete初始化函数
        function initAutoComplete(data)
        {
            cityList = data;
            $("#inputCityName").autocomplete(cityList, options);
            $("#inputCityName").result(function(event, data, formatted)
            {
                $("#inputCityId").val(data.ElongCityId);
            });                   
        }


        /*==========事件绑定==========*/
        $(function()
        {
        });

        /*==========加载时执行的语句==========*/
        $(function()
        {
            //加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
            $.getJSON("cityinfo.htm", null, initAutoComplete) 
        });       
    </script>
</body>
</html>
 

2. 实例讲解
(1)准备数据源
首先要准备实现自动建议的数据源. 本实例是通过发送Ajax请求获取JSON对象. autocomplete()方法支持两个参数, 第一个是data, 第二个是options.

其中data参数可以使本实例中的一个数据变量, 也可以是一个url. 如果是url则会每次都调用Ajax请求获取数据.

为了效率我倾向于在数据量允许的情况下, 在页面加载后使用Ajax获取全部的数据, 然后使用传递数据变量给autocomplete组件. 如实例中所示. 除非数据特别巨大无法再客户端加载,  则只能每次都使用发送Ajax请求从服务器端获取部分数据. 但是这会对服务器造成负担.

(2) 设置关键函数
虽然options是可选项, 但是对于我们的数据源cityList是一个多属性对象, 所以必须设置下面几个关键的配置项后才能够使用:

formatItem
对匹配的每一行数据使用此函数格式化, 返回值是显示给用户的数据内容.

函数签名:

function(row, rowNum, rowCount, searchItem)

参数说明:

row: 当前行. the results row,

rowNum: 当前行号,从1开始.(注意不是索引,索引从0开始) the position of the row in the list of results (starting at 1),

rowCount: 总的行号 the number of items in the list of results

searchItem: 查询使用的数据, 即formatMatch函数返回的数据格式的内容. 我们在formatMatch函数中会设置程序内部搜索时使用的数据格式,这个格式和给用户展示的数据是不同的.

formatMatch
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 实例中用户看到的匹配结果是formatItem中设置的格式, 但是程序内部其实只搜索城市的英文和中文名称, 搜索数据在formatMatch中定义:

return row.CityNameEn + " " + row.CityName;
函数签名:

function(row, rowNum, rowCount,)

参数说明同上

formatResult
此函数是用户选中后返回的数据格式. 比如实例中只返回城市名给input控件:

return row.CityName;
函数签名:

function(row, rowNum, rowCount,)

参数说明同上

(3) 为控件添加Result事件函数
上面3个函数无法实现这类要求: 虽然只返回城市名称, 但是查询时使用城市ID, 选中一个城市后需要将城市ID存储在一个隐藏域中.

所以autocomplete控件提供了result事件函数, 此事件会在用户选中某一项后触发:

            $("#inputCityName").result(function(event, data, formatted)
            {
                $("#inputCityId").val(data.ElongCityId);
            }); 函数签名:

function(event, data, formatted)

参数列表:

Result事件会为绑定的事件处理函数传递三个参数:

event: 事件对象. event.type为result.

data: 选中的数据行.

formatted:   虽然官方的解释应该是formatResult函数返回的值, 但是实验结果是formatMatch返回的值. 在本实例为: "Beijing  北京".

(4) 匹配中文
当前版本的autocomplete控件对中文搜索存在Bug, 原因是其搜索事件绑定在keydown事件上, 当使用中文输入法输入"北"字时没有任何提示. 我对原库做了修改, 将keydown事件修改为keyup事件, 即可完成对中文的智能提示搜索. 另外主要需要将"matchContains"配置项设置为"true", 因为我们的搜索格式是"Beijing 北京", 默认只匹配开头的字符.

(5) 更多配置项
关于更多的配置项, 请参考官方文档:

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions

(6) 更多事件
除了上面介绍的autocomplete()和result()函数, 还有如下函数:

search( ) : 激活search事件

flushCache( ) : 清空缓存

setOptions( options ) : 设置配置项

 

分享到:
评论

相关推荐

    jQuery自动完成插件autocomplete.zip

    在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...

    layui自动填充插件autocomplete.rar

    在layui中,"autocomplete"是一款自动填充插件,常用于输入框,提供智能提示功能,提高用户输入效率。这款插件适用于各种需要自动补全场景,如搜索框、表单填写等。 在layui的autocomplete插件中,主要涉及以下知识...

    jquery自动完成autocomplete,兼容各浏览器,支持中文

    **jQuery自动完成插件Autocomplete** jQuery的Autocomplete插件是一种强大的交互功能,它允许用户在输入时获得建议或预填充的搜索项。这个插件是基于jQuery库的,因此可以轻松地集成到任何HTML页面中,以提高用户...

    jquery autocomplete 自动完成 插件

    jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入数据的效率和用户体验。这个插件基于jQuery框架,使得在网页中实现智能搜索和建议输入变得简单易行。 ### ...

    autocomplete, jQuery自动完成插件,如Google自动完成.zip

    autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete

    jquery自动完成表插件Autocomplete Table

    Autocomplete Table是一个jQuery插件,提供自动完成下拉的多列表,(下拉)字段列表。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info529

    asp.net仿百度的自动完成(autoComplete) jquery+autocomplete.js

    asp.net仿百度的自动完成(autoComplete) 使用Jquery autocomplete.js插件来完成自动完成,可以从数据库中读取数据 ajax异步显示数据!云计算QQ研究群:96191559

    jQuery Autocomplete自动完成插件

    jQuery Autocomplete 自动完成插件是一项广泛应用于Web开发中的jQuery插件,它能够帮助开发者快速地为文本输入框增加自动完成的功能。该插件通过向服务器发送异步请求,根据用户输入的内容提供一个下拉列表,该列表...

    【JS相关插件】自动完成提示插件(jquery.autocomplete)

    "【JS相关插件】自动完成提示插件(jquery.autocomplete)" 这个标题指出了我们讨论的核心是JavaScript的一个插件,它主要用于实现自动完成或建议输入的功能。"jquery.autocomplete"是这个插件的名字,表明它是基于...

    jQuery文本框联想补全自动完成插件

    jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具,它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建,因此,使用它之前需要确保项目中已经引入了...

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

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

    自动完成 autocomplete 两个例子

    为了增强Eclipse的自动完成功能,开发者还可以安装插件,如Code Recommenders,它提供了更多自定义和学习功能,可以根据用户的编码习惯和项目特点进行个性化推荐。 在压缩包文件中,"autoComplete"和"P56_...

    jquery自动完成.autocomplete

    在本文中,我们将深入探讨如何使用jQuery的Autocomplete插件来实现一个动态的、基于Ajax的自动完成功能。这个功能常用于输入框,当用户输入时,它会根据已有的数据提供匹配的建议,极大地提高了用户体验。我们将讨论...

    jquery 自动完成 Autocomplete

    jQuery的自动完成插件是一种强大的交互功能,它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景,极大地提高了用户体验。在本篇讨论中,我们将深入理解jQuery的...

    jquery-autocomplete 自动填充插件参数使用说明

    总结,jQuery UI Autocomplete插件是一个强大且灵活的工具,能够帮助开发者快速实现自动填充功能。通过理解并巧妙运用其提供的参数,可以定制出满足各种需求的搜索体验,从而提升网站或应用的用户体验。无论是在小型...

    jQuery UI 自动完成插件 autocompleter

    自动完成插件在诸如搜索引擎、表单填充等场景下尤为常见。 该插件的基本工作原理是:当用户在输入框中开始键入时,它会根据预定义的数据源(如数组、JSON数据或远程API)动态提供匹配项的列表。用户可以选择列表中...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    实用的轻量级js自动完成autocomplete插件

    这款轻量级的 autocomplete 插件以其高效和灵活的特性赢得了开发者们的喜爱。下面我们将深入探讨 Awesomplete 的核心特点以及如何在实际项目中应用它。 首先, Awesomplete 的轻量级特性是其一大亮点。相比于其他...

    这是一款轻量级的jquery自动完成插件

    **jQuery自动完成插件概述** jQuery自动完成插件是一种便捷的前端开发工具,它极大地提升了用户体验,特别是当用户需要在输入框中输入特定数据时。这款轻量级的jQuery插件设计精巧,旨在帮助用户快速找到并选择匹配...

Global site tag (gtag.js) - Google Analytics