[gen] Implemented live search.

This commit is contained in:
Gaetan Delannay 2014-12-29 15:55:17 +01:00
parent 8591611aac
commit 92d1276ffb
12 changed files with 192 additions and 16 deletions

View file

@ -750,7 +750,7 @@ class ToolMixin(BaseMixin):
corresponding to the search named p_name, on class p_className.'''
initiator = None
if name == 'customSearch':
# It is a custom search whose parameters are in the session.
# It is a custom search whose parameters are in the session
fields = self.REQUEST.SESSION['searchCriteria']
res = Search('customSearch', **fields)
elif ':' in name:
@ -773,12 +773,24 @@ class ToolMixin(BaseMixin):
else:
# It is the search for every instance of p_className
res = Search('allSearch')
# Return a UiSearch if required.
# Return a UiSearch if required
if ui:
res = UiSearch(res, className, self)
if initiator: res.setInitiator(initiator, initiatorField, mode)
return res
def getLiveSearch(self, klass, keywords):
'''Gets the Search instance for performing a live search on p_klass.'''
if not keywords.endswith('*'): keywords += '*'
res = Search('liveSearch', SearchableText=keywords)
if hasattr(klass, 'searchAdvanced'):
# Take into account default params for the advanced search
advanced = klass.searchAdvanced
res.fields.update(advanced.fields)
res.sortBy = advanced.sortBy
res.sortOrder = advanced.sortOrder
return res
def advancedSearchEnabledFor(self, klass):
'''Is advanced search visible for p_klass ?'''
# By default, advanced search is enabled

View file

@ -147,6 +147,10 @@ msgstr ""
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr ""
#. Default: "New search"
msgid "search_new"
msgstr ""

View file

@ -147,6 +147,10 @@ msgstr ""
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr ""
#. Default: "New search"
msgid "search_new"
msgstr ""

View file

@ -147,6 +147,10 @@ msgstr "Resultate suchen"
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr ""
#. Default: "New search"
msgid "search_new"
msgstr "Neues Suchfeld"

View file

@ -148,6 +148,10 @@ msgstr "Search results"
msgid "search_results_descr"
msgstr " "
#. Default: "All results"
msgid "search_results_all"
msgstr "All results"
#. Default: "New search"
msgid "search_new"
msgstr "New search"

View file

@ -147,6 +147,10 @@ msgstr "Resultados"
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr ""
#. Default: "New search"
msgid "search_new"
msgstr "Nueva búsqueda"

View file

@ -148,6 +148,10 @@ msgstr "Résultats"
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr "Tous les résultats"
#. Default: "New search"
msgid "search_new"
msgstr "Nouvelle recherche"

View file

@ -147,6 +147,10 @@ msgstr "Risultati"
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr ""
#. Default: "New search"
msgid "search_new"
msgstr "Nuova ricerca"

View file

@ -147,6 +147,10 @@ msgstr "Resultaten"
msgid "search_results_descr"
msgstr ""
#. Default: "All results"
msgid "search_results_all"
msgstr ""
#. Default: "New search"
msgid "search_new"
msgstr "Nieuwe opzoeking"

View file

@ -104,6 +104,9 @@ td.search { padding-top: 8px }
border: 1px solid #cccccc; background-color: white;
padding: 3px 4px 3px; font-size: 8pt; font-weight: normal;
text-align: left; z-index: 2; line-height: normal }
.liveSearch { top: 19px; padding: 0; width: 250px }
.lsSelected { background-color: #d9d7d9 }
.lsNoResult { text-align: center; padding: 3px 3px; font-style: italic }
.dropdownMenu { cursor: pointer; font-size: 93%; position: relative }
.dropdown a:hover { text-decoration: underline }
.addForm { display: inline }

View file

@ -1125,3 +1125,96 @@ function reindexObject(indexName){
f.indexName.value = indexName;
f.submit();
}
// Live-search-related functions (LS)
var lsTimeout;
function detectEventType(event) {
/* After p_event occurred on a live search input field, must we trigger a
search (a new char has been added), move up/down within the search
results (key up/down has been pressed) or hide the dropdown (escape)? */
if (event.type == 'focus') return 'search'
switch (event.keyCode) {
case 38: return 'up';
case 40: return 'down';
case 27: return 'hide'; // escape
case 13: return 'go'; // cr
case 37: break; // left
case 39: break; // right
default: return 'search';
}
}
/* Function that selects the search result within the dropdown, after the user
has pressed the 'up' od 'down' key (p_direction). */
function selectLSResult(dropdown, direction){
var results = dropdown.children[0].getElementsByTagName('div');
if (results.length == 0) return;
var j; // The index of the new element to select
for (var i=0, len=results.length; i<len; i++) {
if (results[i].className == 'lsSelected') {
if (direction == 'up') {
if (i > 0) j = i-1;
else j = len-1;
}
else {
if (i < (len-1)) j = i+1;
else j = 0;
}
results[i].className = '';
results[j].className = 'lsSelected';
break;
}
}
if (isNaN(j)) results[0].className = 'lsSelected';
}
// Function that allows to go to a selected search result
function gotoLSLink(dropdown) {
var results = dropdown.children[0].getElementsByTagName('div');
for (var i=0, len=results.length; i<len; i++) {
if (results[i].className == 'lsSelected') {
var a = results[i].children[0];
if (a.href) window.location = a.href;
else eval(a.onclick);
}
}
}
function hideLSDropdown(dropdown, timeout) {
if (dropdown.style.display == 'none') return;
if (!timeout) { dropdown.style.display = 'none'; return; }
lsTimeout = setTimeout(function(){
dropdown.style.display = 'none';}, 400);
}
// Function that manages an p_event that occurred on a live search input field
function onLiveSearchEvent(event, klass, action, toolUrl) {
var dropdown = document.getElementById(klass + '_LSDropdown');
if (lsTimeout) clearTimeout(lsTimeout);
// Hide the dropdown if action is forced to 'hide'
if (action == 'hide') { hideLSDropdown(dropdown, true); return; }
// Detect if the dropdown must be shown or hidden
var input = document.getElementById(klass + '_LSinput');
if (input.value.length > 2) {
var eventType = detectEventType(event);
if (!eventType) return;
if (eventType == 'hide') { hideLSDropdown(dropdown, false); return;}
if (eventType == 'go') { gotoLSLink(dropdown); return; }
if (eventType == 'search') {
// Trigger an Ajax search and refresh the dropdown content
var formElems = document.getElementById(klass + '_LSForm').elements;
var params = {};
for (var i=0, len=formElems.length; i<len; i++) {
var param = formElems.item(i);
var paramName = formElems.item(i).name;
if (param.name == 'action') continue;
params[param.name] = param.value;
}
lsTimeout = setTimeout(function() {
askAjaxChunk(klass+ '_LSResults', 'GET', toolUrl, 'pxLiveSearchResults',
params);
dropdown.style.display = 'block';}, 400);
}
else { selectLSResult(dropdown, eventType);} // Move up/down in results
}
else { hideLSDropdown(dropdown, true); }
}

View file

@ -96,7 +96,7 @@ class ToolWrapper(AbstractWrapper):
# --------------------------------------------------------------------------
# Global elements included in every page.
pxPagePrologue = Px('''
<!-- Include type-specific CSS and JS. -->
<!-- Include type-specific CSS and JS -->
<x if="cssJs">
<link for="cssFile in cssJs['css']" rel="stylesheet" type="text/css"
href=":url(cssFile)"/>
@ -154,6 +154,54 @@ class ToolWrapper(AbstractWrapper):
(q(zobj.absolute_url()), q(layoutType), info[0], info[1])
</script>''')
pxLiveSearchResults = Px('''
<x var="className=req['className'];
klass=ztool.getAppyClass(className);
search=ztool.getLiveSearch(klass, req['w_SearchableText']);
zobjects=ztool.executeQuery(className, search=search, \
maxResults=10).objects">
<p if="not zobjects" class="lsNoResult">:_('query_no_result')</p>
<div for="ztied in zobjects" style="padding: 3px 5px">
<a href=":ztied.absolute_url()"
var="content=ztool.truncateValue(ztied.Title(), width=80)"
title=":ztied.Title()">:content</a>
</div>
<!-- Go to the page showing all results -->
<div if="zobjects" align=":dright" style="padding: 3px">
<a class="clickable" style="font-size: 95%; font-style: italic"
onclick=":'document.forms[%s].submit()' % \
q('%s_LSForm' % className)">:_('search_results_all') + '...'</a>
</div>
</x>''')
pxLiveSearch = Px('''
<form var="formId='%s_LSForm' % className"
id=":formId" name=":formId" action=":'%s/do' % toolUrl">
<input type="hidden" name="action" value="SearchObjects"/>
<input type="hidden" name="className" value=":className"/>
<table cellpadding="0" cellspacing="0"
var="searchLabel=_('search_button')">
<tr valign="bottom">
<td style="position: relative">
<input type="text" size="14" name="w_SearchableText" autocomplete="off"
id=":'%s_LSinput' % className" class="inputSearch"
title=":searchLabel"
var="jsCall='onLiveSearchEvent(event, %s, %s, %s)' % \
(q(className), q('auto'), q(toolUrl))"
onkeyup=":jsCall" onfocus=":jsCall"
onblur=":'onLiveSearchEvent(event, %s, %s)' % \
(q(className), q('hide'))"/>
<!-- Dropdown containing live search results -->
<div id=":'%s_LSDropdown' % className" class="dropdown liveSearch">
<div id=":'%s_LSResults' % className"></div>
</div>
</td>
<td><input type="image" class="clickable" src=":url('search')"
title=":searchLabel"/></td>
</tr>
</table>
</form>''')
pxPortlet = Px('''
<x var="toolUrl=tool.url;
queryUrl='%s/query' % toolUrl;
@ -201,19 +249,7 @@ class ToolWrapper(AbstractWrapper):
<!-- Searches -->
<x if="ztool.advancedSearchEnabledFor(rootClass)">
<!-- Live search -->
<form action=":'%s/do' % toolUrl">
<input type="hidden" name="action" value="SearchObjects"/>
<input type="hidden" name="className" value=":className"/>
<table cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td><input type="text" size="14" name="w_SearchableText"
class="inputSearch"/></td>
<td>
<input type="image" class="clickable" src=":url('search')"
title=":_('search_button')"/></td>
</tr>
</table>
</form>
<x>:tool.pxLiveSearch</x>
<!-- Advanced search -->
<div var="highlighted=(currentClass == className) and \