原版:http://jqueryui.com/demos/autocomplete/#combobox
感谢:http://waiting.iteye.com/blog/714655 (不要拍我啊 :D :D )
主要修改:
1.修改了展开的button为img;
2.在使用级联更新时,为清空input的数据,将title属性替换为combobox_title为input的ID,可以在其他时候定位控件;
3.有很多样式写在了js里,大家可以抽取出来;
水平有限,实在不好意思,希望大家能继续完善此控件!
样例:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="js/jquery-combobox.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui.css" rel="stylesheet" />
<style>
body,p,ul,li,input,h1,h2,dl,dd,dt,textarea,table,td,tr,form{padding:0px; margin:0px; list-style:none;}
body{font:12px \5b8b\4f53; color:#333; background:#6FA6CC;}
button.comboboxButton {width:2em; margin-left: -1px;}
button.comboboxButton .ui-button-text {display:block; line-height:1;}
.ui-autocomplete-input {margin:0; padding:0.3em 0 0.31em 0.3em; *padding:0.38em 0 0.46em 0.3em;}
ul.ui-autocomplete {max-height:300px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*firefox*/
* html ul.ui-autocomplete {height:200px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*ie6*/
*+html ul.ui-autocomplete {max-height:200px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*ie7*/
ul.ui-autocomplete {max-height:200px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*ie8*/
</style>
<script>
</script>
</head>
<body>
<br/>
选择项:
<select id="drivercar" name="drivercar_id">
<option value="1">louie</option>
<option value="2">笔记本</option>
<option value="3">zhangsan</option>
<option value="4">lisi</option>
<option value="5">iphone</option>
<option value="6">nokia</option>
<option value="7">诺基亚</option>
<option value="8">谷歌</option>
<option value="9">google</option>
<option value="10" selected="selected">盗梦空间</option>
<option value="11">血钻</option>
<option value="12">剪刀手爱德华</option>
<option value="13">A3</option>
<option value="14">Audi TT</option>
</select>
<script>
$(document).ready(function(){
//$('#drivercar').combobox({size: 30, title: 'drivercar'});
$('#drivercar').combobox();
});
</script>
</body>
</html>
分享到:
相关推荐
for jQuery.UI v1.82 博文链接:https://waiting.iteye.com/blog/714655
NULL 博文链接:https://tianqiushi.iteye.com/blog/2101366
为jquery编写的扩展,仿easyui,清晰简洁,适合初学者,包含扩展jquery.accordion.js、jquery.combobox.js、jquery.datagrid.js、jquery.datebox.js、jquery.dialog.js、jquery.form.js、jquery.layout.js、jquery....
扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。 依赖 combo 用法 <select id=”cc” name=”dept” style=”width:200px;”> ”aa”>aitem1</option> <option>bitem2</option>...
jQuery EasyUI 1.5版本更新内容: Bug(修复) combobox:修复在加载包含所选项数据的时候不会触发“onSelect”事件的BUG; datagrid:修复在字段设置为一个空值的时候导致在某些情况下“updateRow”方法无法正常...
jQuery EasyUI 1.4.5版本更新内容: Bug(修复) datagrid:修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG; treegrid:修复在追加或插入新行的时候触发onLoadSuccess事件的BUG; tree...
jQuery EasyUI 1.4.2版本更新内容: Bug(修复) treegrid:修复重建treegrid之后列会恢复原始大小的问题。 Improvement(改进) draggable:添加“delay”属性,允许用户延迟拖动操作; tree:添加“filter”...
jQuery EasyUI 1.5.1版本更新内容: Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在...
jQuery EasyUI 1.4.3版本更新内容: Bug(修复) textbox:修复“setText”方法不接受值为0的问题; timespinner:修复在使用IE11时点击空文本框时出错的问题; tabs:修复“update”方法只能更新面板正文的问题...
jQuery easyUI 培训 教程 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...
继续发一篇关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果。 分解自定义下拉框: 1....
3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 方法 9 4 Dialog(对话框) 10 4.1 实例 10 4.2 参数 12 4.3 事件 12 4.4 方法 12 5 Messager(提示框) 12 5.1 实例 12 5.2 方法 15 5.3 扩展 16 6 ...
3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 方法 9 4 Dialog(对话框) 10 4.1 实例 10 4.2 参数 12 4.3 事件 12 4.4 方法 12 5 Messager(提示框) 12 5.1 实例 12 5.2 方法 15 5.3 扩展 16 6 ...