autocomplete增加本地数据支持

Author: uje

autocomplete/index.html

@@ -15,6 +15,7 @@
             .ac-list-container { z-index: 10; display: none; position: absolute; width: 300px; margin-top: 10px; background-color: #fff; border: 1px solid #eee; border-radius: 0 0 5px 5px; box-shadow: 3px 3px 3px #ccc; }
             .ac-item a { display: block; padding: 0 40px 0 10px; line-height: 36px; text-align: left; }
             .ac-item a:hover, .ac-selected { background-color: #ddd; }
+            .ac-empty { padding: 30px 0; text-align: center; color: #ccc; }
 
             .sub-title { display: block; margin-top: 30px; font-size: 20px; }
         </style>

autocomplete/js/ajax.js

@@ -1,3 +1,5 @@
+var emptyFn = function(){};
+
 function ajax(options) {
 
     options = options || {};

autocomplete/js/autocomplete.js

@@ -73,7 +73,7 @@ AutoComplete.prototype = {
 		var instance = this,
 			options  = this.options,
 			value    = input.value,
-			url      = options.url.replace('{0}', value);
+			url ;
 
 		if(this.timerID) 
 			clearTimeout(this.timerID);
@@ -84,29 +84,28 @@ AutoComplete.prototype = {
 			return;
 		}
 
+		// 如果是本地数据直接用函数过滤
+		if(utils.isArray(options.data)){
+			var filterData = options.filter(options.data, value);
+			this.render(filterData);
+			return;
+		}
+
+		url = options.data.replace('{0}', value);
+
 		// 使用定时器来减少服务器压力
 		this.timerID = setTimeout(function(){
 			ajax({
 				type: 'get',
 				url: url,
 				done: function(text){
 					try{
-						var data = instance.data = options.formatData(JSON.parse(text)),
-							listItemsHtml = data.map(function(item){
-								return options.buildItem(item);
-							}).join('');
-
-						instance.list.innerHTML = listItemsHtml;
-
-						slice.call(instance.list.childNodes).forEach(function(item, i){
-							item.className = [options.itemClass, (i % 2 === 0 ? options.oddClass : options.evenClass)].join(' ');
-							item.setAttribute('data-index', i);
-						});
+						var data = instance.data = options.formatData(JSON.parse(text));
+						instance.render(data);
 					}catch(e){
 						instance.list.innerHTML = instance.emptyTemplate;
+						instance.listContainer.style.display = 'block';
 					}
-
-					instance.listContainer.style.display = 'block';
 				},
 				fail: function(){
 					instance.list.innerHTML = instance.emptyTemplate;
@@ -119,15 +118,18 @@ AutoComplete.prototype = {
 		var options = this.options,
 			selectedItem = event.target.classList.contains(options.itemClass) ? event.target : event.target.parentNode;
 
+		// 找到 有item标识的节点
 		if(!selectedItem.classList.contains(options.itemClass))
 			event.stopPropagation();
 
+		// 找到数据并转换数据
 		var selectedData = this.data[selectedItem.getAttribute('data-index')],
 			inputValue = options.formatSelectedData(selectedData); // 格式化选中的值
 
 		this.input.value = inputValue;
 		this.list.style.visibility = 'hidden';
 
+		// 去除之前选中节点的选中class，给现在选中的节点加class
 		slice.call(this.list.childNodes).forEach(function(item){
 			item.classList.remove(options.selectedClass);
 		});
@@ -136,6 +138,28 @@ AutoComplete.prototype = {
 		selectedItem.classList.add(options.selectedClass);
 		this.trigger('selected', selectedData);
 
+	},
+	render: function(data){
+		var options = this.options,
+			list    = this.list;
+
+		if(data.length > 0){
+			var listItemsHtml = data.map(function(item){
+					return options.buildItem(item);
+				}).join('');
+
+			list.innerHTML = listItemsHtml;
+
+			// 给数据列表加标识，加样式
+			slice.call(list.childNodes).forEach(function(item, i){
+				item.className = [options.itemClass, (i % 2 === 0 ? options.oddClass : options.evenClass)].join(' ');
+				item.setAttribute('data-index', i);
+			});
+		}else{
+			list.innerHTML = this.emptyTemplate;
+		}
+
+		this.listContainer.style.display = 'block';
 	}
 }
 
@@ -166,6 +190,22 @@ AutoComplete.defaults = {
 	formatSelectedData: function(origialData){
 		return origialData;
 	},
+	filter: function(data, value){
+		var filterData = [],
+			i = 0,
+			l = data.length,
+			item;
+
+		for(; i<l; i++){
+			item = data[i];
+
+			if(new RegExp(value).test(item, 'gi'))
+				filterData.push(item);
+		}
+
+		return filterData;
+
+	},   // 过滤
 	created: emptyFn,  // 控件创建后触发
 	selected: emptyFn  // 选择后触发
 };

autocomplete/js/autocompleteExample.js

@@ -1,6 +1,14 @@
-var AutoComplete = require('./autocomplete');
+var ajax = require('./ajax'),
+	AutoComplete = require('./autocomplete');
 
-new AutoComplete({
-	el  : '#keyword',
-	url : 'data/data.json?keyword={0}'
+ajax.get({
+	url: './data/data.json',
+	done: function(jsonText){
+		var data = JSON.parse(jsonText);
+
+		new AutoComplete({
+			el   : '#keyword',
+			data : data
+		});
+	}
 });

autocomplete/js/utils.js

@@ -1,48 +1,54 @@
-var _extend = (function() {
-    var toString = Object.prototype.toString,
-        slice = [].slice,
-        isType = function(type, input){
-
-            if(input)
-                return toString.call(input).slice(8, -1).toLowerCase() === type;
-            else
-                return function(input){
-                    return isType(type, input);
-                };
-        },
-        isObject = isType('object');
-
-    return function(obj1, obj2){
-
-        if(arguments.length === 2){
-            for(var key in obj2){
-                var newValue = obj2[key];
-
-                if(newValue != null){
-                    if(isObject(newValue)){
-
-                        if(!obj1.hasOwnProperty(key))
-                            obj1[key] = {};
-
-                        _extend(obj1[key], newValue);
-                    }
-                    else{
-                        obj1[key] = newValue;
-                    }
+var toString = Object.prototype.toString,
+    slice = Array.prototype.slice,
+    isType = function(type, input){
+
+        if(input){
+
+            if(type === 'object' && input === null)
+                return false;
+
+            return toString.call(input).slice(8, -1).toLowerCase() === type;
+        }
+        else
+            return function(input){
+                return isType(type, input);
+            };
+    },
+    isObject = isType('object'),
+    isArray  = Array.isArray ? Array.isArray : isType('array');
+
+function _extend(obj1, obj2){
+
+    if(arguments.length === 2){
+        for(var key in obj2){
+            var newValue = obj2[key];
+
+            if(newValue != null){
+                if(isObject(newValue)){
+
+                    if(!obj1.hasOwnProperty(key))
+                        obj1[key] = {};
+
+                    _extend(obj1[key], newValue);
+                }
+                else{
+                    obj1[key] = newValue;
                 }
             }
-        }else if(arguments.length > 2){
-            var objList = slice.call(arguments, 1);
+        }
+    }else if(arguments.length > 2){
+        var objList = slice.call(arguments, 1);
 
-            for(var i=0, l=objList.length; i<l; i++){
-                _extend(obj1, objList[i]);
-            }
+        for(var i=0, l=objList.length; i<l; i++){
+            _extend(obj1, objList[i]);
         }
+    }
 
-        return obj1;
-    };
-})();
+    return obj1;
+}
 
 module.exports = {
-    extend: _extend
+    extend: _extend,
+    isObject: isObject,
+    isArray: isArray
 };