clean input autocomplete engine
This commit is contained in:
@@ -7,3 +7,5 @@ Prise de notes pour les cours du Collège des Arts Thérapeutiques Chinois
|
|||||||
* [x] Take notes on courses
|
* [x] Take notes on courses
|
||||||
* [ ] Quick view of muscles / nerves schemas
|
* [ ] Quick view of muscles / nerves schemas
|
||||||
* [x] Dictionary
|
* [x] Dictionary
|
||||||
|
* [ ] Progress bar
|
||||||
|
* [ ] Redo feedback
|
||||||
@@ -55,9 +55,89 @@ function CATC(asGlobals)
|
|||||||
|
|
||||||
this.initMenu = function()
|
this.initMenu = function()
|
||||||
{
|
{
|
||||||
//Search
|
//Search - Input Autocomplete
|
||||||
self.refreshDefs();
|
self.refreshDefs();
|
||||||
self.elem.$Menu.find('#search').addSearch('defs');
|
self.elem.$Menu.find('#search')
|
||||||
|
.autocomplete({
|
||||||
|
autoFocus: true,
|
||||||
|
delay: 0,
|
||||||
|
minLength: 2,
|
||||||
|
classes:{'ui-autocomplete':'list-group'},
|
||||||
|
source: function(oRequest, fResponse) {
|
||||||
|
var sTerm = removeDiacritics(oRequest.term);
|
||||||
|
var rMatcher = new RegExp($.ui.autocomplete.escapeRegex(sTerm), 'i');
|
||||||
|
|
||||||
|
var asResults = [];
|
||||||
|
$.each(self.vars('lov-defs'), function(iDefId, oItem) {
|
||||||
|
var oTitleMatch = oItem.safe_title.match(rMatcher);
|
||||||
|
var oLabelMatch = oItem.safe_label.match(rMatcher);
|
||||||
|
var oMatch = {};
|
||||||
|
|
||||||
|
oItem.field = '';
|
||||||
|
if(oTitleMatch) {
|
||||||
|
oMatch = oTitleMatch;
|
||||||
|
oItem.field = 'title';
|
||||||
|
}
|
||||||
|
else if(oLabelMatch) {
|
||||||
|
oMatch = oLabelMatch;
|
||||||
|
oItem.field = 'label';
|
||||||
|
}
|
||||||
|
|
||||||
|
if(oItem.field != '') {
|
||||||
|
oItem.index = parseInt(oMatch.index, 10);
|
||||||
|
oItem.size = oMatch[0].length;
|
||||||
|
asResults.push(oItem);
|
||||||
|
}
|
||||||
|
oItem.id = iDefId;
|
||||||
|
});
|
||||||
|
|
||||||
|
self.elem.$Menu.find('#add_def')
|
||||||
|
.toggleClass('btn-outline-primary', (asResults.length > 0))
|
||||||
|
.toggleClass('btn-primary', (asResults.length == 0));
|
||||||
|
|
||||||
|
fResponse(asResults);
|
||||||
|
},
|
||||||
|
select: function(event, ui) {
|
||||||
|
return false; //Do not update input value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.data("ui-autocomplete")._renderItem = function(ul, item) {
|
||||||
|
var fGetHighLightedContent = function(sContent, iIndex, iSize){
|
||||||
|
return $('<span>')
|
||||||
|
.append(sContent.substr(0, iIndex))
|
||||||
|
.append($('<span>', {'class':'highlight text-secondary'}).text(sContent.substr(iIndex, iSize)))
|
||||||
|
.append(sContent.substr(iIndex + iSize));
|
||||||
|
};
|
||||||
|
var $Title = $('<div>', {'class':'title text-break text-capitalize font-weight-bold text-primary'});
|
||||||
|
var $Desc = $('<div>', {'class':'desc text-break'});
|
||||||
|
|
||||||
|
if(item.field=='title') {
|
||||||
|
$Title.append(fGetHighLightedContent(item.title, item.index, item.size));
|
||||||
|
$Desc.text(item.label);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$Title.text(item.title);
|
||||||
|
$Desc.append(fGetHighLightedContent(item.label, item.index, item.size));
|
||||||
|
}
|
||||||
|
return $('<li>', {'class':'list-group-item shadow'})
|
||||||
|
.css('width', $('#search').outerWidth())
|
||||||
|
.data("item.autocomplete", item)
|
||||||
|
.append($('<div>', {'class':'row'})
|
||||||
|
.append($('<div>', {'class':'col'})
|
||||||
|
.append($Title)
|
||||||
|
.append($Desc)
|
||||||
|
)
|
||||||
|
.append($('<div>', {'class':'col-auto d-flex align-items-center'}).append($('<button>', {'class':'btn btn-outline-secondary'})
|
||||||
|
.data('id', item.id)
|
||||||
|
.attr('data-toggle', 'modal')
|
||||||
|
.attr('data-target', '#add-def')
|
||||||
|
.appendIcon('edit')
|
||||||
|
))
|
||||||
|
)
|
||||||
|
.appendTo(ul);
|
||||||
|
};
|
||||||
|
|
||||||
|
//Add/Edit Definition Interface
|
||||||
$('#add-def').on('show.bs.modal', function (event) {
|
$('#add-def').on('show.bs.modal', function (event) {
|
||||||
var $Button = $(event.relatedTarget);
|
var $Button = $(event.relatedTarget);
|
||||||
var iDefId = $Button.data('id');
|
var iDefId = $Button.data('id');
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ var Tools = {
|
|||||||
.append(sMsg)
|
.append(sMsg)
|
||||||
.appendTo($Box)
|
.appendTo($Box)
|
||||||
.slideDown('fast')
|
.slideDown('fast')
|
||||||
.delay(5000)
|
.delay(3000)
|
||||||
.slideUp('fast', function(){$(this).remove();});
|
.slideUp('fast', function(){$(this).remove();});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -168,88 +168,6 @@ function copyArray(asArray)
|
|||||||
return asArray.slice(0); //trick to copy array
|
return asArray.slice(0); //trick to copy array
|
||||||
}
|
}
|
||||||
|
|
||||||
$.prototype.addSearch = function(sSection)
|
|
||||||
{
|
|
||||||
$(this)
|
|
||||||
.autocomplete({
|
|
||||||
autoFocus: true,
|
|
||||||
delay: 0,
|
|
||||||
section:sSection,
|
|
||||||
minLength: 2,
|
|
||||||
classes:{'ui-autocomplete':'list-group'},
|
|
||||||
source: function(oRequest, fResponse) {
|
|
||||||
var sTerm = removeDiacritics(oRequest.term);
|
|
||||||
var rMatcher = new RegExp($.ui.autocomplete.escapeRegex(sTerm), 'i');
|
|
||||||
var asResults = [];
|
|
||||||
|
|
||||||
var asData = self.vars('lov-'+this.options.section);
|
|
||||||
$.each(asData, function(iDefId, oItem) {
|
|
||||||
var oTitleMatch = oItem.safe_title.match(rMatcher);
|
|
||||||
var oLabelMatch = oItem.safe_label.match(rMatcher);
|
|
||||||
if(oTitleMatch) {
|
|
||||||
oItem.index = parseInt(oTitleMatch.index, 10);
|
|
||||||
oItem.size = oTitleMatch[0].length;
|
|
||||||
oItem.field = 'title';
|
|
||||||
asResults.push(oItem);
|
|
||||||
}
|
|
||||||
else if(oLabelMatch) {
|
|
||||||
oItem.index = parseInt(oLabelMatch.index, 10);
|
|
||||||
oItem.size = oLabelMatch[0].length;
|
|
||||||
oItem.field = 'label';
|
|
||||||
asResults.push(oItem);
|
|
||||||
}
|
|
||||||
oItem.id = iDefId;
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#add_def')
|
|
||||||
.toggleClass('btn-outline-primary', (asResults.length > 0))
|
|
||||||
.toggleClass('btn-primary', (asResults.length == 0));
|
|
||||||
|
|
||||||
fResponse(asResults);
|
|
||||||
},
|
|
||||||
select: function(event, ui) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.data("ui-autocomplete")._renderItem = function(ul, item) {
|
|
||||||
|
|
||||||
var fGetHighLightedContent = function(sContent, iIndex, iSize){
|
|
||||||
return $('<span>')
|
|
||||||
.append(sContent.substr(0, iIndex))
|
|
||||||
.append($('<span>', {'class':'highlight text-secondary'}).text(sContent.substr(iIndex, iSize)))
|
|
||||||
.append(sContent.substr(iIndex + iSize));
|
|
||||||
};
|
|
||||||
var $Title = $('<div>', {'class':'title text-break text-capitalize font-weight-bold text-primary'});
|
|
||||||
var $Desc = $('<div>', {'class':'desc text-break'});
|
|
||||||
|
|
||||||
if(item.field=='title') {
|
|
||||||
$Title.append(fGetHighLightedContent(item.title, item.index, item.size));
|
|
||||||
$Desc.text(item.label);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$Title.text(item.title);
|
|
||||||
$Desc.append(fGetHighLightedContent(item.label, item.index, item.size));
|
|
||||||
}
|
|
||||||
return $('<li>', {'class':'list-group-item shadow'})
|
|
||||||
.css('width', $('#search').outerWidth())
|
|
||||||
.data("item.autocomplete", item)
|
|
||||||
.append($('<div>', {'class':'row'})
|
|
||||||
.append($('<div>', {'class':'col'})
|
|
||||||
.append($Title)
|
|
||||||
.append($Desc)
|
|
||||||
)
|
|
||||||
.append($('<div>', {'class':'col-auto d-flex align-items-center'}).append($('<button>', {'class':'btn btn-outline-secondary'})
|
|
||||||
.data('id', item.id)
|
|
||||||
.attr('data-toggle', 'modal')
|
|
||||||
.attr('data-target', '#add-def')
|
|
||||||
.appendIcon('edit')
|
|
||||||
))
|
|
||||||
)
|
|
||||||
.appendTo(ul);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
$.prototype.appendIcon = function(sIcon, bFull) {
|
$.prototype.appendIcon = function(sIcon, bFull) {
|
||||||
return $(this).append(Tools.getIcon(sIcon, bFull));
|
return $(this).append(Tools.getIcon(sIcon, bFull));
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user