基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

时间:2023-01-08 21:30:30

Jquery UI的autocompelete改写

注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置。

加载数据的来源为后台数据库读取。

具体代码如下:

引用

从官方下载插件包地址

http://jqueryui.com/download/

我这里只选择了Autocomplete这个,其他工具不用到可以不勾选,最后选好就可以下载了。

要求的是jquery版本比较高,我这里用的是1.11版本,官方下载的里面有演示demo,也附有jquery包。

引用的顺序如下,两个js顺序不能乱了。

<link rel="stylesheet" href="./jqueryui/cs/jquery-ui.css" />
<script src="./jqueryui/js/jquery.js"></script>
<script src="./jqueryui/js/jquery-ui.js"></script>

主体内容引用官方的示例

    <div id="div" style="height:260px;width:300px;overflow:auto;background-color:gainsboro;">

		  </br>
<h3>这是一个分割点1</h3>
</br>
<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
<span class="autoSpan">
<input id="autocomplete" title="type &quot;a&quot;">
<img class="imgUI" id="test_btn" src="./img/suggest_btn.gif"/>
</span>
</div> </br>
<h3>这是一个分割点2</h3>
</br> </br>
<h3>这是一个分割点3</h3>
</br> </br>
<h3>这是一个分割点4</h3>
</br> </br>
<h3>这是一个分割点5</h3>
</br> </br>
<h3>这是一个分割点6</h3>
</br>
</div>

以上加入多个分割点是为了让控件能正常显示在有滚动条的页面,并能随着滚动条一起滚动。

easyUI的控件combobox就不能实现这样的效果,一直浮于最上层。

js部分代码:

var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"测是啊",
"测试"
]; //json格式数据:
var availableTagsJSON = [
{ label: "C# Language", value: "C#" },
{ label: "C++ Language", value: "C++" },
{ label: "Java Language", value: "Java" },
{ label: "JavaScript Language", value: "JavaScript" },
{ label: "ASP.NET", value: "ASP.NET" },
{ label: "JSP", value: "JSP" },
{ label: "PHP", value: "PHP" },
{ label: "Python", value: "Python" },
{ label: "Ruby", value: "Ruby" }
]; $( "#autocomplete" ).autocomplete({
autoFocus: true,
source: availableTags
}); //点击下拉图片可以实现显示所有选项内容
$('#test_btn').on('click',function (){
if ( $("#autocomplete").autocomplete( "widget" ).is( ":visible" ) ) {
$("#autocomplete").autocomplete( "close" );
return;
}
$(this).blur();
$("#autocomplete").autocomplete('search','');
$("#autocomplete").focus();
});

对应的css样式为:

.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
}
input,img{ vertical-align:middle}
/* IE 6 不支持 max-height
* 我们使用 height 代替,但是这会强制菜单总是显示为那个高度
*/
* html .ui-autocomplete {
height: 100px;
}
.autoSpan{
position:relative;
}
.imgUI{
position:absolute;
left:112px;
}

其中图片<img id="test_btn" src="./img/suggest_btn.gif"/>这个是一个向下的箭头

赋予动态的onclick方法,让它可以触发autocomplete的下拉显示所有选项。

$("#autocomplete").autocomplete('search','');这段是为了让控件显示所有内容的

而其中的' ',我在使用的时候要加上一个空格,官方文档说是不用加的,但是要配合后台数据。

加上一个空格,在后台返回的json格式数据的时候,label里开头或者结尾加上一个空格,

就能实现对全部数据的检索。

前端的代码还可以补充动态显示样式,如下:

//封装的调用后台的方法,这里就不适合其他项目了
var jsonstr = get('/QrySelectAction',{typeName:code});
var obj = JSON.parse(jsonstr);
//json内容大致为:
//[{"label": "博客园", "value": "cnblogs","id":"id"},
//{"label": "白兰", "value": "白兰","id":"id"}] $('#'+code).autocomplete({
autoFocus: true,
source: obj,
select: function(e, ui) {
//选择后增加一个属性值来存第三个id
$(this).attr('data-id',ui.item.id);//为了获取到这个控件的id值多增加一个data-id属性
},
create: function( event, ui ) {
// event 是当前事件对象
// ui对象是空的,只是为了和其他事件的参数签名保持一致
$(this).val(obj[0].label);
var width = $(this).width();//获取当前控件的高度
if(width>127){
var rew = width-127+112;
$(this).parent().find('img').css('left',rew+'px');//设置下拉按钮的相对位置
}
}
});

后台代码使用的查询数据库返回对应的json.toString,然后在前端用~JSON.parse(jsonstr);~

转换成json格式后,才能让autocomplete读取出来。

后台注意在拼写label的值的时候,多一个空格,这样前端选择的时候给点击显示全部内容使用。

suggest_btn.gif基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

最后效果如下:

基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+的更多相关文章

  1. jquery 自动补全控件&lpar;支持IE6&rpar;待整理

    自动补全控件(兼容IE6):http://bassistance.de/ download地址:http://jquery.bassistance.de/autocomplete/jquery.aut ...

  2. Qt5 UI信号、槽自动连接的控件重名

    Qt5 UI信号.槽自动连接的控件重名 来源 http://blog.csdn.net/goldenhawking/article/details/51865909 对Qt5稍有熟悉的童鞋都知道信号. ...

  3. 基于linux vim环境python代码自动补全

    (一)简述 在使用vim编写python文件的过程中,默认的vim不会实现代码补全功能,在写程序或者是改程序的时候不是很方面,很容易出错,但是vim提供了各种插件,其中包括这个python文件的自动补 ...

  4. Qt5 UI信号、槽自动连接的控件重名大坑(UI生成的槽函数存在一个隐患,即控件重名。对很复杂的控件,不要在 designer 里做提升,而是等到程序启动后,再动态创建,可以避免很多问题)

    对Qt5稍有熟悉的童鞋都知道信号.槽的自动连接机制.该机制使得qt designer 设计的UI中包含的控件,可以不通过显式connect,直接和cpp中的相应槽相关联.该机制的详细文章见 http: ...

  5. jquery mutilselect 插件添加中英文自动补全

    jquery mutilselect默认只能根据设置的option来进行自动提示 $.each(availableTags, function(key, value) { $('#channels') ...

  6. 基于jQuery仿uploadify的HTML5图片上传控件jquery&period;html5uploader

    (function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...

  7. jquery&plus;css实现邮箱自动补全

    今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...

  8. 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

  9. notepad&plus;&plus;代码自动补全功能

    可以代码自动补全功能,默认他是没有开启这个功能的,在首选项->备份与自动完成 里面有自动完成这一个设置,可以设置单词补全,也可以设置函数补全,这样写代码就快多了

随机推荐

  1. 利用注解来保存uri

    一直对getRequestURI()与getRequestURL()理解不透彻,因此今天通过查找资料,现将些许收获分享一下: [非原创]代码搬运工..(*^__^*) 1.request.getSch ...

  2. MVC,MVP 和 MVVM

    复杂的软件必须有清晰合理的架构,否则无法开发和维护.MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 ...

  3. android WeakReference&lpar;弱引用 防止内存泄漏&rpar;与SoftReference&lpar;软引用 实现缓存机制(cache)&rpar;

    在Android开发中,基本上很少有用到软引用或弱引用,这两个东东若用的很好,对自己开发的代码质量的提高有很大的帮助.若用的不好,会坑了自己.所以,在还没有真正的去了解它们之前,还是慎用比较好. 下面 ...

  4. 浅谈人脸检测之Haar分类器方法

    我们要探讨的Haar分类器实际上是Boosting算法(提升算法)的一个应用,Haar分类器用到了Boosting算法中的AdaBoost算法,只是把AdaBoost算法训练出的强分类器进行了级联,并 ...

  5. php内核探索 &lbrack;转&rsqb;

    PHP内核探索:从SAPI接口开始 PHP内核探索:一次请求的开始与结束 PHP内核探索:一次请求生命周期 PHP内核探索:单进程SAPI生命周期 PHP内核探索:多进程/线程的SAPI生命周期 PH ...

  6. Hadoop学习总结之四:Map-Reduce的过程解析

    转:http://www.cnblogs.com/forfuture1978/archive/2010/11/19/1882268.html

  7. win pe 修改xp系统开机密码方法

    今天使用win pe 修改了xp系统的密码,有三种方法 一 .  最终找到了一个方法,这个方法只能改写密码,也就是说会留下痕迹,如下: 1.使用的工具:FbinstTool v1.50 FbinstT ...

  8. &lbrack;置顶&rsqb; JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  9. Spring4&period;0学习笔记&lpar;4&rpar; —— 使用外部属性文件

    1.配置xml文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  10. android集成twitter登录

    Twitter曾经举行了自己四年以来的第一场开发者大会.而这场名为“Flight”的大会,也是以后它的年度惯例. 这次大会的主题也完全围绕开发者进行.大会的焦点是一个名叫Fabric的新SDK,里面包 ...