程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西。

问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用,终于调好了,但是发现输入字符后无反应。

就完全按照官网实例,写了个数据源发现没问题,然后就感觉应该是数据源的问题,后来想到到源码中找一下,看看插件到底是怎么使用数据源的,找了一会没找到。

很郁闷不知道什么问题,然后就又问了下同学,给我发了一段代码,发现我们两个用的不一样,

 function parse(data) {
            var parsed = [];
            var rows = data.split("\n");
            for (var i = 0; i < rows.length; i++) {
                var row = $.trim(rows[i]);
                if (row) {
                    row = row.split("|");
                    parsed[parsed.length] = {
                        data: row,
                        value: row[0],
                        result: options.formatResult && options.formatResult(row, row[0]) || row[0]
                    };
                }
            }
            return parsed;
        };
然后就试着再找了找,原来JQuery UI 中名字叫Filter,然后看了下代码,一下子明白了,感觉好恶心啊。

$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
return value.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" );
},
filter: function( array, term ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( term ), "i" );
return $.grep( array, function( value ) {
return matcher.test( value.label || value.value || value );
} );
}
} );

原来这个这个匹配的地方,使用的属性数据源里面的字段名必须与官网的实例一致。“matcher.test( value.label || value.value || value );”

然后就修改下数据源,然后可以使用了。

但是,写完了,我同学说JQuery UI 的autocomplete是个阉割版,完整版名字叫:jquery.autocomplete.js

一搜索果然是啊,这个版本比jQuery UI的强大很多啊,功能也特别全。害我已经调了那么久了,其实以前用过这个版本,但是一直感觉不正规,就想找个官网可以下载的。

后来发现我在csdn下载过,我以前用的都是这个完整版本,不是阉割版。

JQuery UI 的 autocomplete对jQuery版本还有要求,最后还要写点代码,让两个jQuery版本可以在一个页面出现。

这个详情请百度。

var $jq = jQuery.noConflict(true); 新版本使用完后调用。
大概意思是调用这句话,让$回复成被覆盖的版本。

JQuery UI Autocomplete与jquery.autocomplete.js的更多相关文章

  1. jQuery UI 实例 - 自动完成(Autocomplete)

    http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...

  2. Jquery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  3. jQuery UI简单的讲解

    我们先进入一下问答时间,你都知道多少呢? (1)什么是jQuery UI 呢? 解答:jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互. ...

  4. jquery ui的css设计

    jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...

  5. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  6. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  7. 1分钟看完 jQuery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  8. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  9. JavaScript UI选型及Jquery EasyUI使用经验谈

    最近由于项目需要,对js UI作了一些简单的了解和使用,有自己的一些想法,在这里留个记录. 当然,我的专注点在管理系统的范围内,所以互联网网站及其他形态的应用这里不提及,所以jQuery UI和Boo ...

  10. 关于ExtJS、JQuery UI和easy UI的选择问题

    转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...

随机推荐

  1. ruby md5加签验签方法

    # md5签名def md5_sign(data,key) return OpenSSL::Digest::MD5.hexdigest(data+key)end # md5验签def md5_veri ...

  2. [Mongodb]3.2版本的一些基本操作--待续

    一.缘由 今天公司测试股票交易系统,需要拉取大量的数据存放,故考虑放在mongodb里. 二.一些基本操作 1.权限管理 mongo默认是不用账号就能登陆的,默认端口27017,但是这不太安全.我们要 ...

  3. [ActionScritp 3.0] 使用LocalConnection建立通信

    包 flash.net 类 public class LocalConnection 继承 LocalConnection → EventDispatcher → Object 语言版本:  Acti ...

  4. xml中的非法字符

    今使用Jdom生成xml文件的时候,总是出现0x0,0x8为非法字符,经过搜索,问题原因及解决方法如下: 原因:xml中需要过滤的字符分为两类,一类是不允许出现在xml中的字符,这些字符不在xml的定 ...

  5. 分析Tornado的协程实现

    转自:http://www.binss.me/blog/analyse-the-implement-of-coroutine-in-tornado/ 什么是协程 以下是Wiki的定义: Corouti ...

  6. 有关RAVE报表 - 大富翁论坛20050419

    部分资料来源于RAVE开发人员指南 ravedevguide5 新闻组News.Nevrona.com RAVE的官方主页  www.nevrona.com/rave KeyLife富翁笔记  作者 ...

  7. uploadify图片上传发生Security Error

    今天在使用uploadify进行图片上传的时候出现security error.其根本原因是flash跨域问题.主要原因是因为配了两个域名www.ttyouni.com 和 ttyouni.com 在 ...

  8. 慕课网-安卓工程师初养成-6-3 如何使用 Java 中的数组

    来源:http://www.imooc.com/code/1525 Java 中操作数组只需要四个步骤: 1. 声明数组 语法:  或者  其中,数组名可以是任意合法的变量名,如: 2. 分配空间 简 ...

  9. Discuz开源论坛本地部署自动生成数据库

    这个版本可能比较有点老,但是万变不离其宗,再新的版本都是在已有的基础上更新的,所以掌握方法是最重要的! 先上几张安装成功后的图 (安装成功的论坛首页) (后台管理登录页) 下面说一下安装步骤 第一步: ...

  10. js进度条实现

    1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...