simple jquery auto completed plugin
2722 ワード
jquery-simpleAutoCompleted.js
簡単にフィルタして、リストを表示します.
development v0.2
1.新しいインスタンスを返す
2.外部配列データを受け入れる
3.内部パッケージ
4.インタフェースの提供
demo.html
簡単にフィルタして、リストを表示します.
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>