使用JQuery UI完成可输入内容且自动匹配的的下拉列表

最新推荐文章于 2023-07-21 17:32:33 发布

buildSuccess

最新推荐文章于 2023-07-21 17:32:33 发布

阅读量3.8k

点赞数

分类专栏： JQuery控件使用文章标签： java web jquery ui

JQuery控件使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最终效果：

由于做下拉列表时，下拉条内容太多，逐个选择太费时间，所以想要设置一个既能使用按钮在下拉列表里选择，又能基于输入内容过滤结果，可以节省查看下拉列表的时间

原理：该输入是从一个已有的select元素中读取，传递给带有自定义的source选项的Autocomplete

要点：

1.JQueryUI的部件之一：Autocomplete，参考内容：http://www.runoob.com/jqueryui/example-autocomplete.html

默认功能：在输入文本框中输入时，自动完成部件(Autocomplete)提供相应的建议，下拉按钮提供展开列表的操作，

以下是页面的代码：

<!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" />
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui.css" />
</head>
<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:1em;  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;}

</style>

<body>
<div style="margin:50px">
	<p>
	For jQuery v1.6+
	输入关键字自动完成，如果首次输入中文没触发匹配可以继续输入，或者输入一个空格接着backspace删除即可触发。
	双击输入框即可全部选择，方便替换输入
	</p>
	<br />
	<select id="s3">
		<option value="">请输入关键字</option>
		<option value="1">java</option>
		<option value="2">javascript</option>
		<option value="3">c</option>
		<option value="35">c"/'?</option>
		<option value="4">c++</option>
		<option value="14">c#</option>
		<option value="5">php</option>
		<option value="15">python</option>
		<option value="6">奇瑞托拉斯c</option>
		<option value="8">新奇军</option>
		<option value="9">奇瑞集团</option>
		<option value="11">长安 集团有限公司</option>
		<option value="10">奇特</option>
		<option value="30"></option>
		<option value="31">0</option>
	</select>

	<input type="button" id="showSel" value="显示select" οnclick="javascript:$('#s3').show();" />
</div>


<script type="text/javascript" src="js/jquery162.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-min_prop.js"></script>

<script>
$(document).ready(function(){
	//$('#s3').combobox({size: 25});
	$('#s3').combobox({'title': '显示所有'});
});
</script>
</body>
</html>

完整文件下载链接：http://download.csdn.net/detail/wrxaini/9401227

buildSuccess

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery UI完成可输入内容且自动匹配的的下拉列表

要点：1.JQueryUI的部件之一：Autocomplete，参考内容：http://www.runoob.com/jqueryui/example-autocomplete.html大部分是用到了其中的组合框的内容：
复制链接

扫一扫