Feature: Quick Search
Device/Job/User Search refactoring. Quick-Search implemented.
This commit is contained in:
@@ -41936,13 +41936,76 @@ jQuery.fn.DataTable.defaults.aLengthMenu = [[10, 20, 50, -1], [10, 20, 50, "All"
|
||||
$(function () {
|
||||
|
||||
// Search Functionality
|
||||
var quickSearchInited = false;
|
||||
$('#SearchQuery').watermark('Search').keypress(function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
$(this).closest('form').submit();
|
||||
return false;
|
||||
}
|
||||
}).focus(function () {
|
||||
$(this).select();
|
||||
$this = $(this);
|
||||
$this.select();
|
||||
|
||||
if (!quickSearchInited) {
|
||||
var quickSearchUrl = $this.attr('data-quicksearchurl');
|
||||
if (quickSearchUrl) {
|
||||
$this.autocomplete({
|
||||
source: quickSearchUrl,
|
||||
minLength: 2,
|
||||
select: function (e, ui) {
|
||||
$this.val(ui.item.tag);
|
||||
$this.closest('form').submit();
|
||||
},
|
||||
response: function (e, ui) {
|
||||
for (var i = 0; i < ui.content.length; i++) {
|
||||
var item = ui.content[i];
|
||||
switch (item.Type) {
|
||||
case 'Device':
|
||||
item.tag = '!' + item.Id;
|
||||
break;
|
||||
case 'Job':
|
||||
item.tag = '#' + item.Id;
|
||||
break;
|
||||
case 'User':
|
||||
item.tag = '@' + item.Id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}).autocomplete("widget").attr('id', 'QuickSearchMenu');
|
||||
|
||||
$this.data('ui-autocomplete')._renderItem = function (ul, item) {
|
||||
var template;
|
||||
|
||||
//"<a><strong>" + item.DisplayName + "</strong><br>" + item.Id + " (" + item.Type + ")</a>"
|
||||
|
||||
switch (item.Type) {
|
||||
case 'Device':
|
||||
template = $('<a>').append('<i class="fa fa-desktop fa-fw">').append($('<strong>').text('Device ' + item.Id)).append($('<div>').text(item.ComputerName + '; ' + item.DeviceModelDescription))
|
||||
break;
|
||||
case 'Job':
|
||||
if (item.DeviceSerialNumber && item.UserId) {
|
||||
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId + '; ' + item.DeviceSerialNumber))
|
||||
} else if (item.DeviceSerialNumber) {
|
||||
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.DeviceSerialNumber))
|
||||
} else if (item.UserId) {
|
||||
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId))
|
||||
}
|
||||
break;
|
||||
case 'User':
|
||||
template = $('<a>').append('<i class="fa fa-user fa-fw">').append($('<strong>').text(item.DisplayName)).append($('<div>').text(item.Id))
|
||||
break;
|
||||
}
|
||||
|
||||
return $("<li>")
|
||||
.data("item.autocomplete", item)
|
||||
.append(template)
|
||||
.appendTo(ul);
|
||||
};
|
||||
|
||||
}
|
||||
quickSearchInited = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Menu Functionality
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -4,13 +4,76 @@
|
||||
$(function () {
|
||||
|
||||
// Search Functionality
|
||||
var quickSearchInited = false;
|
||||
$('#SearchQuery').watermark('Search').keypress(function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
$(this).closest('form').submit();
|
||||
return false;
|
||||
}
|
||||
}).focus(function () {
|
||||
$(this).select();
|
||||
$this = $(this);
|
||||
$this.select();
|
||||
|
||||
if (!quickSearchInited) {
|
||||
var quickSearchUrl = $this.attr('data-quicksearchurl');
|
||||
if (quickSearchUrl) {
|
||||
$this.autocomplete({
|
||||
source: quickSearchUrl,
|
||||
minLength: 2,
|
||||
select: function (e, ui) {
|
||||
$this.val(ui.item.tag);
|
||||
$this.closest('form').submit();
|
||||
},
|
||||
response: function (e, ui) {
|
||||
for (var i = 0; i < ui.content.length; i++) {
|
||||
var item = ui.content[i];
|
||||
switch (item.Type) {
|
||||
case 'Device':
|
||||
item.tag = '!' + item.Id;
|
||||
break;
|
||||
case 'Job':
|
||||
item.tag = '#' + item.Id;
|
||||
break;
|
||||
case 'User':
|
||||
item.tag = '@' + item.Id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}).autocomplete("widget").attr('id', 'QuickSearchMenu');
|
||||
|
||||
$this.data('ui-autocomplete')._renderItem = function (ul, item) {
|
||||
var template;
|
||||
|
||||
//"<a><strong>" + item.DisplayName + "</strong><br>" + item.Id + " (" + item.Type + ")</a>"
|
||||
|
||||
switch (item.Type) {
|
||||
case 'Device':
|
||||
template = $('<a>').append('<i class="fa fa-desktop fa-fw">').append($('<strong>').text('Device ' + item.Id)).append($('<div>').text(item.ComputerName + '; ' + item.DeviceModelDescription))
|
||||
break;
|
||||
case 'Job':
|
||||
if (item.DeviceSerialNumber && item.UserId) {
|
||||
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId + '; ' + item.DeviceSerialNumber))
|
||||
} else if (item.DeviceSerialNumber) {
|
||||
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.DeviceSerialNumber))
|
||||
} else if (item.UserId) {
|
||||
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId))
|
||||
}
|
||||
break;
|
||||
case 'User':
|
||||
template = $('<a>').append('<i class="fa fa-user fa-fw">').append($('<strong>').text(item.DisplayName)).append($('<div>').text(item.Id))
|
||||
break;
|
||||
}
|
||||
|
||||
return $("<li>")
|
||||
.data("item.autocomplete", item)
|
||||
.append(template)
|
||||
.appendTo(ul);
|
||||
};
|
||||
|
||||
}
|
||||
quickSearchInited = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Menu Functionality
|
||||
|
||||
@@ -3492,6 +3492,25 @@ header .watermark,
|
||||
#header .watermark {
|
||||
background-color: #888;
|
||||
}
|
||||
#QuickSearchMenu {
|
||||
max-height: 400px;
|
||||
font-size: .9em;
|
||||
background: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#QuickSearchMenu li:not(:last-child) {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
}
|
||||
#QuickSearchMenu li > a {
|
||||
padding: 2px;
|
||||
}
|
||||
#QuickSearchMenu li > a > i {
|
||||
margin-right: 2px;
|
||||
}
|
||||
#QuickSearchMenu li > a > div {
|
||||
padding-left: 1.2857142857142858em;
|
||||
margin-left: 2px;
|
||||
}
|
||||
#layout_PageHeading {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x #ffffff;
|
||||
background: linear-gradient(to bottom, #f2f2f2 0px, #ffffff 50px) #ffffff;
|
||||
@@ -4509,7 +4528,6 @@ input:-moz-placeholder {
|
||||
overflow-x: hidden;
|
||||
/* add padding to account for vertical scrollbar */
|
||||
|
||||
padding-right: 20px;
|
||||
}
|
||||
/* IE 6 doesn't support max-height
|
||||
* we use height instead, but this forces the menu to always be this tall
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -291,6 +291,25 @@ header .watermark,
|
||||
#header .watermark {
|
||||
background-color: #888;
|
||||
}
|
||||
#QuickSearchMenu {
|
||||
max-height: 400px;
|
||||
font-size: .9em;
|
||||
background: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#QuickSearchMenu li:not(:last-child) {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
}
|
||||
#QuickSearchMenu li > a {
|
||||
padding: 2px;
|
||||
}
|
||||
#QuickSearchMenu li > a > i {
|
||||
margin-right: 2px;
|
||||
}
|
||||
#QuickSearchMenu li > a > div {
|
||||
padding-left: 1.2857142857142858em;
|
||||
margin-left: 2px;
|
||||
}
|
||||
#layout_PageHeading {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x #ffffff;
|
||||
background: linear-gradient(to bottom, #f2f2f2 0px, #ffffff 50px) #ffffff;
|
||||
|
||||
@@ -112,6 +112,7 @@ header, #header {
|
||||
&:first-child {
|
||||
border-top: 1px solid @BackgroundColour;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid @BackgroundColour;
|
||||
}
|
||||
@@ -215,6 +216,31 @@ header, #header {
|
||||
}
|
||||
}
|
||||
|
||||
#QuickSearchMenu {
|
||||
max-height: 400px;
|
||||
font-size: .9em;
|
||||
background: none;
|
||||
background-color: @BackgroundColourLight;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid @TableDataDarkBorderColour;
|
||||
}
|
||||
|
||||
& > a {
|
||||
padding: 2px;
|
||||
& > i {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding-left: 1.2857142857142858em;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout_PageHeading {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x @white;
|
||||
background: linear-gradient(to bottom, @BackgroundColourGradient 0px, @white 50px) @white;
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -106,7 +106,6 @@ input:-moz-placeholder {
|
||||
overflow-x: hidden;
|
||||
/* add padding to account for vertical scrollbar */
|
||||
|
||||
padding-right: 20px;
|
||||
}
|
||||
/* IE 6 doesn't support max-height
|
||||
* we use height instead, but this forces the menu to always be this tall
|
||||
|
||||
@@ -32,7 +32,7 @@ input:-moz-placeholder {
|
||||
/* prevent horizontal scrollbar */
|
||||
overflow-x: hidden;
|
||||
/* add padding to account for vertical scrollbar */
|
||||
padding-right: 20px;
|
||||
//padding-right: 20px;
|
||||
}
|
||||
/* IE 6 doesn't support max-height
|
||||
* we use height instead, but this forces the menu to always be this tall
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user