%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: autocomplete.js
Description: jQuery UI autocomplete
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(document).ready(function(){
/************************************
* Auto Complete *
************************************/
var peopleTags = [
"Aaron",
"Abel",
"Bacon",
"Barry",
"Clancy",
"Cornstalk",
"Daniel",
"David",
"Edison",
"Frank",
"George",
"Hamilton",
"Irvine",
"Jackson",
"Kelly",
"Lumb",
"Magee",
"Newton",
"Olson",
"Paul",
"Quine",
"Roy",
"Smith",
"Tony",
"Young",
"Zampa"
];
$( ".ac-default" ).autocomplete({
source: peopleTags
});
// Accent Folding
var names = ["Jörn Zaefferer", "Scott González", "John Resig"];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function(term) {
var ret = "";
for (var i = 0; i < term.length; i++) {
ret += accentMap[term.charAt(i)] || term.charAt(i);
}
return ret;
};
$(".ac-accent-folding").autocomplete({
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(names, function(value) {
value = value.label || value.value || value;
return matcher.test(value) || matcher.test(normalize(value));
}));
}
});
// Categories
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li;
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
li = that._renderItemData(ul, item);
if (item.category) {
li.attr("aria-label", item.category + " : " + item.label);
}
});
}
});
var data = [{
label: "anders",
category: ""
}, {
label: "andreas",
category: ""
}, {
label: "antal",
category: ""
}, {
label: "annhhx10",
category: "Products"
}, {
label: "annk K12",
category: "Products"
}, {
label: "annttop C13",
category: "Products"
}, {
label: "anders andersson",
category: "People"
}, {
label: "andreas andersson",
category: "People"
}, {
label: "andreas johnson",
category: "People"
}];
$(".ac-category").catcomplete({
delay: 0,
source: data
});
// Combobox
$.widget("custom.combobox", {
_create: function() {
this.wrapper = $("<div>")
.addClass("custom-combobox input-group")
.insertAfter(this.element);
// Add Search Icon and Toggel Button
$('<div class="input-group-prepend"><span class="input-group-text"><i class="ft-search"></i></span></div>')
.appendTo(this.wrapper);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input form-control ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
classes: {
"ui-tooltip": "ui-state-highlight"
}
});
this._on(this.input, {
autocompleteselect: function(event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$('<div class="input-group-prepend"><span class="input-group-text ac-toggle"><i class="ft-chevron-down"></i></span></div>')
.attr("tabIndex", -1)
.appendTo(this.wrapper)
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.on("mousedown", function() {
wasOpen = input.autocomplete("widget").is(":visible");
})
.on("click", function() {
input.trigger("focus");
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function(event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function() {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function() {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.autocomplete("instance").term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
$(".ac-combobox").combobox();
// Custom Data & Display
var projects = [{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
}, {
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
}, {
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}];
$(".ac-project").autocomplete({
minLength: 0,
source: projects,
focus: function(event, ui) {
$(".ac-project").val(ui.item.label);
return false;
},
select: function(event, ui) {
$(".ac-project").val(ui.item.label);
$(".ac-project-id").val(ui.item.value);
$(".ac-project-description").html(ui.item.desc);
return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
.append("<div>" + item.label + "<br>" + item.desc + "</div>")
.appendTo(ul);
};
// Multiple Values
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$(".ac-multiple-values")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
peopleTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
// Remote Datasource
$(".ac-remote-datasource").autocomplete({
source: "../../../app-assets/data/jquery-ui/search.php",
minLength: 2
});
// Remote with caching
var cache = {};
$(".ac-remote-caching").autocomplete({
minLength: 2,
source: function(request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.getJSON("../../../app-assets/data/jquery-ui/search.php", request, function(data, status, xhr) {
cache[term] = data;
response(data);
});
}
});
// Multiple Remote
function split_r(val) {
return val.split(/,\s*/);
}
function extractLast_r(term) {
return split_r(term).pop();
}
$(".ac-multiple-remote")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function(request, response) {
$.getJSON("../../../app-assets/data/jquery-ui/search.php", {
term: extractLast_r(request.term)
}, response);
},
search: function() {
// custom minLength
var term = extractLast_r(this.value);
if (term.length < 2) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split_r(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
// XML Data Pasing
$.ajax({
url: "../../../app-assets/data/jquery-ui/london.xml",
dataType: "xml",
success: function(xmlResponse) {
var data = $("geoname", xmlResponse).map(function() {
return {
value: $("name", this).text() + ", " +
($.trim($("countryName", this).text()) || "(unknown country)"),
id: $("geonameId", this).text()
};
}).get();
$(".ac-xml-data-parse").autocomplete({
source: data,
minLength: 0,
});
}
});
});
Zerion Mini Shell 1.0