Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev: Small formatting improvements for fuzzySearch

Browse Source
pull/527/head
SandyDatatables 3 years ago
parent 683c6176ab
commit e8609c7464
1 changed files with 183 additions and 175 deletions
Show Stats Download Patch File Download Diff File

358
features/fuzzySearch/dataTables.fuzzySearch.js
Unescape View File

@ -70,7 +70,7 @@
} }
} }
fuzzySearch = function(searchVal, data, initial) { function fuzzySearch(searchVal, data, initial) {
// If no searchVal has been defined then return all rows. // If no searchVal has been defined then return all rows.
if(searchVal === undefined || searchVal.length === 0) { if(searchVal === undefined || searchVal.length === 0) {
return { return {
@ -195,191 +195,199 @@
$(document).on('init.dt', function(e, settings) { $(document).on('init.dt', function(e, settings) {
let api = new $.fn.dataTable.Api(settings); let api = new $.fn.dataTable.Api(settings);
var initial = api.init().fuzzySearch; var initial = api.init().fuzzySearch;
// If this is not set then fuzzy searching is not enabled on the table so return.
if(!initial) {
return;
}
// If this is set then fuzzy searching is enabled on the table. // Find the input element
if (initial) { let input = $('div.dataTables_filter input', api.table().container())
// Find the input element
let input = $('div.dataTables_filter input', api.table().container()) let fontBold = {
'font-weight': '600',
let fontBold = {'font-weight': '600', 'background-color': 'rgba(255,255,255,0.1)'}; 'background-color': 'rgba(255,255,255,0.1)'
let fontNormal = {'font-weight': '500', 'background-color': 'transparent',}; };
let toggleCSS = { let fontNormal = {
'border': 'none', 'font-weight': '500',
'background': 'none', 'background-color': 'transparent'
'font-size': '100%', };
'width': '50%', let toggleCSS = {
'display': 'inline-block', 'border': 'none',
'color': 'white', 'background': 'none',
'cursor': 'pointer', 'font-size': '100%',
'padding': '0.5em' 'width': '50%',
} 'display': 'inline-block',
'color': 'white',
// Only going to set the toggle if it is enabled 'cursor': 'pointer',
let toggle, tooltip, exact, fuzzy, label; 'padding': '0.5em'
if(initial.toggleSmart) { }
toggle =$('<button class="toggleSearch">Abc</button>')
.insertAfter(input) // Only going to set the toggle if it is enabled
.css({ let toggle, tooltip, exact, fuzzy, label;
'border': 'none', if(initial.toggleSmart) {
'background': 'none', toggle =$('<button class="toggleSearch">Abc</button>')
'position': 'absolute', .insertAfter(input)
'right': '0px', .css({
'top': '4px', 'border': 'none',
'cursor': 'pointer', 'background': 'none',
'color': '#3b5e99', 'position': 'absolute',
'margin-top': '1px' 'right': '0px',
}); 'top': '4px',
exact =$('<button class="toggleSearch">Exact</button>') 'cursor': 'pointer',
.insertAfter(input) 'color': '#3b5e99',
.css(toggleCSS) 'margin-top': '1px'
.css(fontBold)
.attr('highlighted', true);
fuzzy =$('<button class="toggleSearch">Fuzzy</button>')
.insertAfter(input)
.css(toggleCSS);
input.css({
'padding-right': '30px'
}); });
label = $('<div>Search Type<div>').css({'padding-bottom': '0.5em', 'font-size': '0.8em'}) exact =$('<button class="toggleSearch">Exact</button>')
tooltip = $('<div class="fuzzyToolTip"></div>') .insertAfter(input)
.css({ .css(toggleCSS)
'position': 'absolute', .css(fontBold)
'right': '0px', .attr('highlighted', true);
'top': '2em', fuzzy =$('<button class="toggleSearch">Fuzzy</button>')
'background': 'white', .insertAfter(input)
'border-radius': '4px', .css(toggleCSS);
'text-align': 'center', input.css({
'padding': '0.5em', 'padding-right': '30px'
'background-color': '#16232a', });
'box-shadow': '4px 4px 4px rgba(0, 0, 0, 0.5)', label = $('<div>Search Type<div>').css({'padding-bottom': '0.5em', 'font-size': '0.8em'})
'color': 'white', tooltip = $('<div class="fuzzyToolTip"></div>')
'transition': 'opacity 0.25s', .css({
'z-index': '30001' 'position': 'absolute',
}) 'right': '0px',
.width(input.outerWidth() - 3) 'top': '2em',
.append(label).append(exact).append(fuzzy); 'background': 'white',
'border-radius': '4px',
'text-align': 'center',
'padding': '0.5em',
'background-color': '#16232a',
'box-shadow': '4px 4px 4px rgba(0, 0, 0, 0.5)',
'color': 'white',
'transition': 'opacity 0.25s',
'z-index': '30001'
})
.width(input.outerWidth() - 3)
.append(label).append(exact).append(fuzzy);
}
function toggleFuzzy() {
if(toggle.attr('blurred')) {
toggle.css({'filter': 'blur(0px)'}).removeAttr('blurred');
fuzzy.removeAttr('highlighted').css(fontNormal);
exact.attr('highlighted', true).css(fontBold);
} }
else {
function toggleFuzzy() { toggle.css({'filter': 'blur(1px)'}).attr('blurred', true);
if(toggle.attr('blurred')) { exact.removeAttr('highlighted').css(fontNormal);
toggle.css({'filter': 'blur(0px)'}).removeAttr('blurred'); fuzzy.attr('highlighted', true).css(fontBold);
fuzzy.removeAttr('highlighted').css(fontNormal); }
exact.attr('highlighted', true).css(fontBold); triggerSearchFunction();
}
// Turn off the default datatables searching events
$(settings.nTable).off('search.dt.DT');
// The function that we want to run on search
var triggerSearchFunction = function(event){
// If the search is only to be triggered on return wait for that
if (!initial.returnSearch || event.key === "Enter") {
var searchVal = '';
// If the toggle is set and isn't checkd then perform a normal search
if(toggle && !toggle.attr('blurred')) {
api.rows().iterator('row', function(settings, rowIdx) {
settings.aoData[rowIdx]._fuzzySearch = undefined;
})
api.search(input.val())
api.draw();
} }
// Otherwise perform a fuzzy search
else { else {
toggle.css({'filter': 'blur(1px)'}).attr('blurred', true); // Get the value from the input element and convert to lower case
exact.removeAttr('highlighted').css(fontNormal); searchVal = input.val();
fuzzy.attr('highlighted', true).css(fontBold);
} if (searchVal !== undefined && searchVal.length === 0) {
triggerSearchFunction(); searchVal = searchVal.toLowerCase();
}
// Turn off the default datatables searching events
$(settings.nTable).off('search.dt.DT');
// The function that we want to run on search
var triggerSearchFunction = function(event){
// If the search is only to be triggered on return wait for that
if (!initial.returnSearch || event.key === "Enter") {
var searchVal = '';
// If the toggle is set and isn't checkd then perform a normal search
if(toggle && !toggle.attr('blurred')) {
api.rows().iterator('row', function(settings, rowIdx) {
settings.aoData[rowIdx]._fuzzySearch = undefined;
})
api.search(input.val())
api.draw();
}
// Otherwise perform a fuzzy search
else {
// Get the value from the input element and convert to lower case
searchVal = input.val();
if (searchVal !== undefined && searchVal.length === 0) {
searchVal = searchVal.toLowerCase();
}
// For each row call the fuzzy search function to get result
api.rows().iterator('row', function(settings, rowIdx) {
settings.aoData[rowIdx]._fuzzySearch = fuzzySearch(searchVal, settings.aoData[rowIdx]._aFilterData, initial)
});
// Empty the datatables search and replace it with our own
api.search("");
input.val(searchVal);
api.draw();
} }
// For each row call the fuzzy search function to get result
api.rows().iterator('row', function(settings, rowIdx) {
settings.aoData[rowIdx]._fuzzySearch = fuzzySearch(searchVal, settings.aoData[rowIdx]._aFilterData, initial)
});
// Empty the datatables search and replace it with our own
api.search("");
input.val(searchVal);
api.draw();
} }
} }
}
input.off();
// Set listeners to occur on toggle and typing input.off();
if(toggle) { // Set listeners to occur on toggle and typing
// Highlights one of the buttons in the tooltip and un-highlights the other if(toggle) {
function highlightButton(toHighlight, noHighlight) { // Highlights one of the buttons in the tooltip and un-highlights the other
if(!toHighlight.attr('highlighted')){ function highlightButton(toHighlight, noHighlight) {
toHighlight.attr('highlighted', true); if(!toHighlight.attr('highlighted')){
toHighlight.css(fontBold); toHighlight.attr('highlighted', true);
noHighlight.css(fontNormal); toHighlight.css(fontBold);
noHighlight.removeAttr('highlighted'); noHighlight.css(fontNormal);
toggleFuzzy() noHighlight.removeAttr('highlighted');
} toggleFuzzy()
}
// Removes the tooltip element
function removeToolTip() {
tooltip.remove();
}
// Actions for the toggle button
toggle
.on('click', toggleFuzzy)
.on('mouseenter', function() {
tooltip
.insertAfter(toggle)
.on('mouseleave', removeToolTip);
exact.on('click', () => highlightButton(exact, fuzzy));
fuzzy.on('click', () => highlightButton(fuzzy, exact));
})
.on('mouseleave', removeToolTip);
// Actions for the input element
input
.on('mouseenter', function() {
tooltip
.insertAfter(toggle)
.on('mouseleave', removeToolTip);
exact.on('click', () => highlightButton(exact, fuzzy))
fuzzy.on('click', () => highlightButton(fuzzy, exact))
})
.on('mouseleave', function() {
var inToolTip = false;
tooltip.on('mouseenter', () => inToolTip = true);
toggle.on('mouseenter', () => inToolTip = true);
setTimeout(function(){
if(!inToolTip) {
removeToolTip();
}
}, 50)
});
var state = api.state.loaded();
if(state !== null && state._fuzzySearch === 'true') {
toggle.click();
} }
}
api.on('stateSaveParams', function(e, settings, data) {
data._fuzzySearch = toggle.attr('blurred'); // Removes the tooltip element
function removeToolTip() {
tooltip.remove();
}
// Actions for the toggle button
toggle
.on('click', toggleFuzzy)
.on('mouseenter', function() {
tooltip
.insertAfter(toggle)
.on('mouseleave', removeToolTip);
exact.on('click', () => highlightButton(exact, fuzzy));
fuzzy.on('click', () => highlightButton(fuzzy, exact));
}) })
.on('mouseleave', removeToolTip);
api.state.save();
// Actions for the input element
input
.on('mouseenter', function() {
tooltip
.insertAfter(toggle)
.on('mouseleave', removeToolTip);
exact.on('click', () => highlightButton(exact, fuzzy))
fuzzy.on('click', () => highlightButton(fuzzy, exact))
})
.on('mouseleave', function() {
var inToolTip = false;
tooltip.on('mouseenter', () => inToolTip = true);
toggle.on('mouseenter', () => inToolTip = true);
setTimeout(function(){
if(!inToolTip) {
removeToolTip();
}
}, 50)
});
var state = api.state.loaded();
if(state !== null && state._fuzzySearch === 'true') {
toggle.click();
} }
// Always add this event no matter if toggling is enabled api.on('stateSaveParams', function(e, settings, data) {
input.on('input keydown', triggerSearchFunction); data._fuzzySearch = toggle.attr('blurred');
})
api.state.save();
} }
// Always add this event no matter if toggling is enabled
input.on('input keydown', triggerSearchFunction);
}) })
}()); }());
Write Preview
Loading…
Cancel
Save