ax5ui-autocomplete
Version:
A autocomplete plugin that works with Bootstrap & jQuery
145 lines (131 loc) • 5.69 kB
HTML
<!--
~ Copyright (c) 2016. tom@axisj.com
~ - github.com/thomasjang
~ - www.axisj.com
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/-->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../dist/ax5autocomplete.css"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ax5core/dist/ax5core.js"></script>
<script src="../dist/ax5autocomplete.js"></script>
</head>
<body style="padding: 10px;">
<div class="container">
<div style="height:300px;"></div>
<form name="forms">
<h1>form-group</h1>
<div class="form-group">
<div data-ax5autocomplete="ui1" data-ax5autocomplete-config='{
multiple: true,
editable: true,
size: ""
}'></div>
</div>
</form>
<button type="button" class="btn" data-btn="setValue">setValue</button>
<button type="button" class="btn" data-btn="setValue2">setValue(array)</button>
<button type="button" class="btn" data-btn="setText">setText</button>
<button type="button" class="btn" data-btn="setText2">setText(array)</button>
<button type="button" class="btn" data-btn="getSelectedOption">getSelectedOption</button>
<div style="height:100px;"></div>
</div>
<script>
var options = [];
options.push({value: "1", text: "string"});
options.push({value: "2", text: "number"});
options.push({value: "3", text: "substr"});
options.push({value: "4", text: "substring"});
options.push({value: "5", text: "search"});
options.push({value: "6", text: "parseInt"});
options.push({value: "7", text: "toFixed"});
options.push({value: "8", text: "min"});
options.push({value: "9", text: "max"});
options.push({value: "10", text: "장기영"});
options.push({value: "11", text: "장서우"});
options.push({value: "12", text: "이영희"});
options.push({value: "13", text: "황인서"});
options.push({value: "14", text: "황세진"});
options.push({value: "15", text: "이서연"});
options.push({value: "16", text: "액시스제이"});
options.push({value: "17", text: "ax5"});
options.push({value: "18", text: "ax5grid"});
options.push({value: "19", text: "ax5combobox"});
options.push({value: "20", text: "ax5autocompleteax5autocomplete"});
options.push({value: "21", text: "ax5binder"});
options.push({value: "22", text: "ax5select"});
options.push({value: "23", text: "ax5mask"});
options.push({value: "24", text: "ax5toast"});
options.push({value: "25", text: "ax5dialog"});
options.push({value: "26", text: "ax5modal"});
var myUI = new ax5.ui.autocomplete({
theme: "danger",
removeIcon: '<i class="fa fa-times" aria-hidden="true"></i>'
});
$(document.body).ready(function () {
$('[data-btn]').click(function () {
var act = this.getAttribute("data-btn");
switch (act) {
case "setValue":
myUI.setValue($('[data-ax5autocomplete="ui1"]'), {value:"test", text:"test"});
//myCombo.blur($('[data-ax5autocomplete="ui1"]'));
break;
case "setValue2":
myUI.setValue($('[data-ax5autocomplete="ui1"]'), [{value:"test1", text:"test1"}, {value:"test2", text:"test2"}]);
//myUI.setValue($('[data-ax5autocomplete="ui1"]'), null);
//myCombo.blur($('[data-ax5autocomplete="ui1"]'));
break;
case "setText":
myUI.setText($('[data-ax5autocomplete="ui1"]'), "string");
//myCombo.blur($('[data-ax5autocomplete="ui1"]'));
break;
case "setText2":
myUI.setText($('[data-ax5autocomplete="ui1"]'), ["substring", "search"]);
//myCombo.blur($('[data-ax5autocomplete="ui1"]'));
break;
case "getSelectedOption":
console.log(myUI.getSelectedOption($('[data-ax5autocomplete="ui1"]')));
console.log($(document.forms).serialize());
break;
}
});
// jquery extend
myUI.bind({
//theme: "primary",
target: $('[data-ax5autocomplete="ui1"]'),
onSearch: function (callback) {
var searchWord = this.searchWord;
setTimeout(function () {
var regExp = new RegExp(searchWord);
var myOptions = [];
options.forEach(function (n) {
if (n.text.match(regExp)) {
myOptions.push({
value: n.value,
text: n.text
})
}
});
callback({
options: myOptions
});
}, 150);
},
onStateChanged: function () {
//console.log(this);
}
});
myUI.disable($('[data-ax5autocomplete="ui1"]'));
myUI.enable($('[data-ax5autocomplete="ui1"]'));
});
// todo : onStateChanged
// todo : css overflow 상황 해결.
</script>
</body>
</html>