• 人民网驻阿尔及利亚记者报道集 2018-02-19
  • 党务问答:党组与党委有何区别? 2018-02-19
  • MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 以色列警方:已有足够的证据可以用于起诉以总理 2018-02-18
  • 冬奥会短节目第四 金博洋:伤病令我更强大 2018-02-18
  • 天津市北辰区委书记冯卫华:强化政治担当 把主体责任落实落细 2018-02-17
  • 正月初一客流继续回落 全国铁路预计发送旅客389万人次 2018-02-17
  • 送别余光中:诗人虽远行,乡愁永流传 2018-02-17
  • 集团原董事长违纪被查 人员伤亡事故频发 湖北宜化:去年亏损额超过公司市值 2018-02-17
  • 图片故事:“六个人”的火车站 2018-02-16
  • 【马来西亚房产】雅诗阁之星十年包租可续租! ——凤凰网房产马来西亚 2018-02-16
  • 大量顺差在中国,多数利润归美国 2018-02-16
  • 河北今年将削减煤炭消费500万吨 2018-02-16
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-15
  • 以色列警方:已有足够的证据可以用于起诉以总理 2018-02-15
  • 【jquery教程】jQuery Autocomplete

    栏目: jquery 发布于: 2014-11-28 18:04:42

    jQuery Autocomplete

    jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符,用户可以过滤列表以获得更好的匹配。

    该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。

    访问 jQuery Autocomplete 官网,下载 jQuery Autocomplete 插件。

    如需了解更多有关 Autocomplete 的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。

    实例演示

    jQuery Autocomplete 插件演示。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Autocomplete 插件</title>
    <script type="text/javascript" src="http://www.rocksun.cn/autocomplete/lib/jquery.js"></script>
    <script type='text/javascript' src='http://www.rocksun.cn/autocomplete/lib/jquery.bgiframe.min.js'></script>
    <script type='text/javascript' src='http://www.rocksun.cn/autocomplete/lib/jquery.ajaxQueue.js'></script>
    <script type='text/javascript' src='http://www.rocksun.cn/autocomplete/lib/thickbox-compressed.js'></script>
    <script type='text/javascript' src='http://www.rocksun.cn/autocomplete/jquery.autocomplete.js'></script>
    <script type='text/javascript' src='http://www.rocksun.cn/autocomplete/demo/localdata.js'></script>
    <link rel="stylesheet" type="text/css" rel="nofollow"  />
    <link rel="stylesheet" type="text/css" rel="nofollow"  />
    <link rel="stylesheet" type="text/css" rel="nofollow"  />
    	
    <script type="text/javascript">
    $().ready(function() {
    
    	function log(event, data, formatted) {
    		$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
    	}
    	
    	function formatItem(row) {
    		return row[0] + " (<strong>id: " + row[1] + "</strong>)";
    	}
    	function formatResult(row) {
    		return row[0].replace(/(<.+?>)/gi, '');
    	}
    	
    	$("#suggest1").focus().autocomplete(cities);
    	$("#month").autocomplete(months, {
    		minChars: 0,
    		max: 12,
    		autoFill: true,
    		mustMatch: true,
    		matchContains: false,
    		scrollHeight: 220,
    		formatItem: function(data, i, total) {
    			// 不在值列表中显示当前月份(无论何种原因)
    			if ( data[0] == months[new Date().getMonth()] ) 
    				return false;
    			return data[0];
    		}
    	});
    	$("#suggest13").autocomplete(emails, {
    		minChars: 0,
    		width: 310,
    		matchContains: "word",
    		autoFill: false,
    		formatItem: function(row, i, max) {
    			return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
    		},
    		formatMatch: function(row, i, max) {
    			return row.name + " " + row.to;
    		},
    		formatResult: function(row) {
    			return row.to;
    		}
    	});
    	$("#singleBirdRemote").autocomplete("search.php", {
    		width: 260,
    		selectFirst: false
    	});
    	$("#suggest14").autocomplete(cities, {
    		matchContains: true,
    		minChars: 0
    	});
    	$("#suggest3").autocomplete(cities, {
    		multiple: true,
    		mustMatch: true,
    		autoFill: true
    	});
    	$("#suggest4").autocomplete('search.php', {
    		width: 300,
    		multiple: true,
    		matchContains: true,
    		formatItem: formatItem,
    		formatResult: formatResult
    	});
    	$("#imageSearch").autocomplete("images.php", {
    		width: 320,
    		max: 4,
    		highlight: false,
    		scroll: true,
    		scrollHeight: 300,
    		formatItem: function(data, i, n, value) {
    			return "<img src='images/" + value + "'/> " + value.split(".")[0];
    		},
    		formatResult: function(data, value) {
    			return value.split(".")[0];
    		}
    	});
    	$("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
    		width: 320,
    		max: 4,
    		highlight: false,
    		multiple: true,
    		multipleSeparator: " ",
    		scroll: true,
    		scrollHeight: 300
    	});
    	
    	
    	$(":text, textarea").result(log).next().click(function() {
    		$(this).prev().search();
    	});
    	$("#singleBirdRemote").result(function(event, data, formatted) {
    		if (data)
    			$(this).parent().next().find("input").val(data[1]);
    	});
    	$("#suggest4").result(function(event, data, formatted) {
    		var hidden = $(this).parent().next().find(">:input");
    		hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
    	});
        $("#suggest15").autocomplete(cities, { scroll: true } );
    	$("#scrollChange").click(changeScrollHeight);
    	
    	$("#thickboxEmail").autocomplete(emails, {
    		minChars: 0,
    		width: 310,
    		matchContains: true,
    		highlightItem: false,
    		formatItem: function(row, i, max, term) {
    			return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
    		},
    		formatResult: function(row) {
    			return row.to;
    		}
    	});
    	
    	$("#clear").click(function() {
    		$(":input").unautocomplete();
    	});
    });
    
    function changeOptions(){
    	var max = parseInt(window.prompt('请输入要显示项的数目:', jQuery.Autocompleter.defaults.max));
    	if (max > 0) {
    		$("#suggest1").setOptions({
    			max: max
    		});
    	}
    }
    
    function changeScrollHeight() {
        var h = parseInt(window.prompt('请输入新的滚动高度(以像素为单位的数字):', jQuery.Autocompleter.defaults.scrollHeight));
        if(h > 0) {
            $("#suggest1").setOptions({
    			scrollHeight: h
    		});
        }
    }
    
    function changeToMonths(){
    	$("#suggest1")
    		// 清除已有的数据
    		.val("")
    		// 改变本地数据为月份
    		.setOptions({data: months})
    		// 获取 label 标签
    		.prev()
    		// 更新 label 标签
    		.text("月份(本地):");
    }
    </script>
    	
    </head>
    
    <body>
    
    <h1 id="banner">jQuery Autocomplete 插件演示</h1>
    
    <div id="content">
    	
    	<form autocomplete="off">
    		<p>
    			<label>单个城市(本地):</label>
    			<input type="text" id="suggest1" />
    			<input type="button" value="获取值" />
    			<input type="button" value="改变最大项" onclick="changeOptions();" />
    			<input type="button" value="改为月份数据" onclick="changeToMonths();" />
    			<input type="button" value="改变滚动高度" id="scrollChange" />
    		</p>
    		<p>
    			<label>月份(本地):</label>
    			<input type="text" id="month" />
    			<input type="button" value="获取值" />
    			(当前月份已从列表中排除)
    		</p>
    		<p>
    			<label>E-Mail(本地):</label>
    			<input type="text" id="suggest13" />
    			<input type="button" value="获取值" />
    		</p>
    		<p>
    			<label>单只鸟(远程):</label>
    			<input type="text" id="singleBirdRemote" />
    			<input type="button" value="获取值" />
    		</p>
    		<p>
    			<label>隐藏输入</label>
    			<input />
    		</p>
    		<p>
    			<label>单个城市(包含):</label>
    			<input type="text" id="suggest14" />
    			<input type="button" value="获取值" />
    		</p>
    		<p>
    			<label>多个城市(本地):</label>
    			<textarea id='suggest3' cols='40' rows='3'></textarea>
    			<input type="button" value="获取值" />
    		</p>
    		<p>
    			<label>多只鸟(远程):</label>
    			<textarea id='suggest4'></textarea>
    			<input type="button" value="获取值" />
    		</p>
    		<p>
    			<label>隐藏输入</label>
    			<textarea></textarea>
    		</p>
        <p>
    			<label>图像搜索(远程):</label>
    			<input type="text" id='imageSearch' />
    			<input type="button" value="获取值" />
    		</p>
        <p>
    			<label>标签(本地):</label>
    			<input type="text" id='tags' />
    			<input type="button" value="获取值" />
    		</p>
    		<p>
    			<label>一些下拉选项(&lt;3 IE):</label>
    			<select>
    				<option value="">Item 12334455</option>
    				<option value="2">Item 2</option>
    				<option value="3">Item 3</option>
    				<option value="4">Item 4</option>
    			</select>
    		</p>
    		
    		<input type="submit" value="提交" />
    	</form>
    	
    	<p>
    		<a rel="nofollow" href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">点击这里查看一个 ThickBox 窗口内的 Autocomplete..</a>(即使超出范围插件也会正常工作)
    	</p>		
    	
    	<div id="modalWindow" style="display: none;">
                    <p>
                            <label>E-Mail(本地):</label>
                            <input type="text" id="thickboxEmail" />
                            <input type="button" value="获取值" />
                    </p>
    		</div>
    		
    	<button id="clear">移除所有的 Autocomplete</button>
    	
    	<a rel="nofollow" >PHP 脚本用于远程的 Autocomplete</a>
    	
    	<h3>结果:</h3> <ol id="result"></ol>
    
    </div>
    
    </body>
    </html>
    


    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【jquery教程】jQuery Autocomplete
    IT技术书籍推荐:
    深入PHP:面向对象、模式与实践(第3版)
    深入PHP:面向对象、模式与实践(第3版)
    Mart Zandstra (作者), 陈浩 (译者), 吴孙滨 (译者), 胡丹 (译者), 李静 (译者)
    《深入PHP:面向对象、模式与实践(第3版)》是PHP专家经典力作的最新版本。书中主要介绍了如何使用面向对象技术和设计模式编写稳定的、可维护的代码,如何使用Subversion管理多个开发人员,如何使用Phing和PEAR进行构建和安装,以及将构建和测试过程自动化的策略,包括持续集成?!渡钊隤HP:面向对象、模式与实践(第3版)》适合中高级PHP程序员阅读。