simple jquery auto completed plugin

简易自动补全插件

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/ym80/blog/220707

文章标签：

#javascript #ui #ViewUI

本文介绍了一个基于jQuery的简易自动补全插件实现。该插件通过监听输入框的键盘事件来显示与输入文本匹配的建议列表。文章提供了插件的源代码及一个演示示例。

为什么80%的码农都做不了架构师？>>>

jquery-simpleAutoCompleted.js

简单过滤，并显示列表.

development v0.2

1. 返回一个新实例

2. 接受一个外部数组数据

3. 内部封装

4. 提供接口

(function($) {
	// default settings:
	var defaults = {
		id: false,
		resultPanel : false,
		data : [],		
	};

	var MyAutoCompleted = function(element, options) {
		var elem = $(element);
		var obj = this;
						
		this.config = $.extend( {}, defaults, options );
		
		// keyup handler
	    this._input = function(e) {    	
	    	var txt = elem.val(), kc = e.keyCode;    	    	
	    	$("#"+obj.config.resultPanel).html("");
	    	
	    	if (e && (kc === 13 || kc === 38 || kc === 40)) {
				return;
			}    		    	
	    	if (txt) {    		
	    		setTimeout(function() {
	    			obj._build(obj._regSearch(txt));
	    		},500);    		
	    	} else {
	    		obj._build(obj.config.data.slice(0, 4));
	    	}     	
	    }  
	    /**
	     * create ui of template results
	     */
	    this._build = function(items) {
	    	var li = "";
	    	$.each(items, function(i, n) {
	    		li += "<li><input type='radio' name='"+obj.config.id+"-filter' id='"+n+"' />"+n+"</li>";
	    	});    		    	
	    	$("#"+obj.config.resultPanel).html(li);
	    }    
	    /**
	     * filter results from data
	     */
	    this._regSearch = function(k) {	    	
	    	var match = [];
	    	$.each(obj.config.data, function(i, n){
	    		if (n.indexOf(k) != -1) {
	    			match.push(n);
	    		}
	    	});	 
	    	return match;
	    } 
	};

	$.fn.myAutoCompleted = function(options) {		
		return this.each(function() {			
			var element = $(this);	 			
			var myplugin = new MyAutoCompleted(this, options);						          		
			element.unbind("keyup").bind("keyup", myplugin._input);
		});
	};
})(jQuery);

demo.html

<!DOCTYPE html>
<html>
<head>
	<title>Simple Autocomplete</title>		
</head>

<body>
<div>
	<input type="text" id=txtField placeholder="">
	<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="jquery-simple-autoCompleted.js"></script>		
<script>
$(document).ready(function() {	
	$("#txtField").myAutoCompleted({id:1, resultPanel:"suggestions",data:["3.0.1","3.0.2","3.1.2","3.1.3","1.0.2","1.0.3","2.0.3","2.0.1"]});	
});
</script>
</body>
</html>

转载于:https://my.oschina.net/ym80/blog/220707