jQuery Combobox 扩展

原版: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>
 

你可能感兴趣的:(JavaScript,jquery,UI,css,Nokia)