VaKeR CYBER ARMY
Apache/2.4.41 (Ubuntu) Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 www-data ( 33 )7.4.33 pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, / var /www /html /libs /absol-acomp /demo /
Current File : /var/www/html/libs/absol-acomp/demo/autocompleteinput.html <!DOCTYPE html>
<html>
<head>
<title>Auto Complete Input</title>
<link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
<!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
<script src="https://absol.cf/hightlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
<style>
</style>
</head>
<body>
<h1>Auto Complete Input</h1>
<h2>Array string</h2>
<script class="viewable">
var first = absol._({
tag: 'autocompleteinput',
attr:{
disabled:'true'
},
props: {
adapter: {
texts: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
//getItemText, getItemView aren't required because the queryItems() return Array<string>
//alway required
queryItems: function (query, mInput) {
var query = query.toLocaleLowerCase();
return this.texts.filter(function (text) {
return text.toLocaleLowerCase().indexOf(query) >= 0;
})
}
}
}
}).addTo(document.body);
absol._({
tag: 'button',
child: { text: 'click to focus' },
on: {
click:function(){
first.focus();
}
}
}).addTo(document.body)
var viewer = absol._('span').addTo(document.body);
first.on('change', function(event){
viewer.innerHTML = event.value;
});
</script>
<h2>Array object, custom view</h2>
<script class="viewable">
absol._({
tag: 'autocompleteinput',
props: {
adapter: {
texts: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
queryItems: function (query, mInput) {
var query = query.toLocaleLowerCase();
return this.texts.map(function (text) {
var start = text.toLocaleLowerCase().indexOf(query);
if (start >= 0) {
var hightlightedText = text.substr(0, start) + '<strong style="color:red">' + text.substr(start, query.length) + '</strong>' + text.substr(start + query.length);
return {
text: text,
hightlightedText: hightlightedText
}
}
else return null;
}).filter(function (it) { return it !== null; })
},
getItemText: function (item, mInput) {
return item.text;
},
getItemView: function (item, index, _, $, query, reuseItem, refParent, mInput) {
return _({
tag: 'div',
style: {
height: '30px'
},
child: {
tag: 'span',
props: {
innerHTML: item.hightlightedText
}
}
})
}
}
}
}).addTo(document.body);
</script>
<!--Created using ToHtml.com on 2019-05-24 07:46:19 UTC -->
<h2>Array object, custom, async</h2>
<script class="viewable">
var englishDictionary = new IFrameBridge(new Worker('../dist/wordfinder.js'));
absol._({
tag: 'autocompleteinput',
style: {
display: 'block',
height: '40px',
'max-width': '500px',
margin: "10px"
},
on: {
change: function (event, sender) {
absol.$('span#selected-word', selectedWord).innerHTML = event.value || sender.value;
}
},
props: {
adapter: {
queryItems: function (query, mInput) {
return englishDictionary.invoke('find', query).then(function (texts) {
return texts.map(function (text) {
var start = text.toLocaleLowerCase().indexOf(query);
if (start >= 0) {
var hightlightedText = text.substr(0, start) + '<strong style="color:red">' + text.substr(start, query.length) + '</strong>' + text.substr(start + query.length);
return {
text: text,
hightlightedText: hightlightedText
}
}
else return null;
}).filter(function (it) { return it !== null; })
})
},
getItemText: function (item, mInput) {
return item.text;
},
getItemView: function (item, index, _, $, query, reuseItem, refParent, mInput) {
if (reuseItem) {
reuseItem.childNodes[0].innerHTML = item.hightlightedText;
return reuseItem;
}
else
return _({
tag: 'div',
child: {
tag: 'span',
props: {
innerHTML: item.hightlightedText
}
}
})
}
}
}
}).addTo(document.body);
var selectedWord = absol._('<div style="height:30px">Selected: <span id="selected-word"></span></div>').addTo(document.body);
</script>
<h2>Build-in adapter</h2>
<script class="viewable">
absol._({
tag: 'autocompleteinput',
props: {
adapter: [
//adapter type
'SearchStringArray',
//first param
[
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
]
}
}).addTo(document.body);
</script>
<script class="viewable">
absol._('<span> Input 1 <span>').addTo(document.body);
var input1 = absol._({
tag: 'autocompleteinput',
props: {
adapter: [
//adapter type
'SearchObjectArray',
//first param
[
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
].map(function (text, index) {
return { text: text, index: index }
})
]
},
on: {
change: function (event, sender) {
console.log(sender.getSelectedObject()); //only work with SearchObjectArray adapter
}
}
}).addTo(document.body);
absol._('<span> Input 2 <span>').addTo(document.body);
var input2 = absol._({
tag: 'autocompleteinput',
props: {
adapter: [
//adapter type
'SearchObjectArray',
//first param
[
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
].map(function (text, index) {
return { text: text, index: index }
}),
{
getItemText: function (item) {
return '[' + item.index + ']' + item.text;
}
}
]
},
on: {
change: function (event, sender) {
console.log(sender.getSelectedObject()); //only work with SearchObjectArray adapter
}
}
}).addTo(document.body);
</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js?"></script>
<!--Created using ToHtml.com on 2019-05-27 04:27:01 UTC -->
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)