Skip to content

Commit

Permalink
#2645 adds fields parameter for using custom server responses with se…
Browse files Browse the repository at this point in the history 
…arch
  • Loading branch information
@jlukic
jlukic committed Aug 17, 2015
1 parent 1720d1c commit 57ee104
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 54 deletions.
1 change: 1 addition & 0 deletions RELEASE-NOTES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
- **Label** - Added a new `basic label` style, works symbiotically with other label types to provide a more lightweight style label
- **Menu** - Added new `tabular` menu types, `right tabular`, `bottom tabular`, added many new `tabular` menu variables for customizing
- **Menu** - Appearance of `labeled icon menu` has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
- **Search** - Search now can use any server response mapping, use the `fields` parameter to pass in a mapping of server response to content **thanks @anibalmf1** #2645
- **Table** - New `fixed` table variation added for use with `table-layout: fixed;`. This also supports "..." ellipsis when used with `single line` content

**[Enhancements](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.1.0+is%3Aclosed)**\
Expand Down
124 changes: 70 additions & 54 deletions src/definitions/modules/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ $.fn.search = function(parameters) {
className = settings.className,
metadata = settings.metadata,
regExp = settings.regExp,
fields = settings.fields,
selector = settings.selector,
error = settings.error,
namespace = settings.namespace,
Expand Down Expand Up @@ -571,14 +572,14 @@ $.fn.search = function(parameters) {
;
module.verbose('Parsing server response', response);
if(response !== undefined) {
if(searchTerm !== undefined && response.results !== undefined) {
if(searchTerm !== undefined && response[fields.results] !== undefined) {
module.addResults(searchHTML);
module.inject.id(response.results);
module.inject.id(response[fields.results]);
module.write.cache(searchTerm, {
html : searchHTML,
results : response.results
results : response[fields.results]
});
module.save.results(response.results);
module.save.results(response[fields.results]);
}
}
}
Expand Down Expand Up @@ -815,8 +816,8 @@ $.fn.search = function(parameters) {
module.debug('Generating html from response', response);
var
template = settings.templates[settings.type],
isProperObject = ($.isPlainObject(response.results) && !$.isEmptyObject(response.results)),
isProperArray = ($.isArray(response.results) && response.results.length > 0),
isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])),
isProperArray = ($.isArray(response[fields.results]) && response[fields.results].length > 0),
html = ''
;
if(isProperObject || isProperArray ) {
Expand All @@ -827,11 +828,11 @@ $.fn.search = function(parameters) {
}
}
else {
response.results = response.results.slice(0, settings.maxResults);
response[fields.results] = response[fields.results].slice(0, settings.maxResults);
}
}
if($.isFunction(template)) {
html = template(response, settings);
html = template(response, fields);
}
else {
module.error(error.noTemplate, false);
Expand Down Expand Up @@ -1055,7 +1056,7 @@ $.fn.search.settings = {
'description'
],
// fields to search

displayField : '',
// field to display in standard results template

Expand Down Expand Up @@ -1123,6 +1124,21 @@ $.fn.search.settings = {
beginsWith : '(?:\s|^)'
},

// maps api response attributes to internal representation
fields: {
categories : 'results', // array of categories (category view)
categoryName : 'name', // name of category (category view)
categoryResults : 'results', // array of results (category view)
description : 'description', // result description
image : 'image', // result image
price : 'price', // result price
results : 'results', // array of results (standard)
title : 'title', // result title
action : 'action', // "view more" object
actionText : 'text', // "view more" text
actionURL : 'url' // "view more" text
},

selector : {
prompt : '.prompt',
searchButton : '.search.button',
Expand Down Expand Up @@ -1176,109 +1192,109 @@ $.fn.search.settings = {
}
return html;
},
category: function(response) {
category: function(response, fields) {
var
html = '',
escape = $.fn.search.settings.templates.escape
;
if(response.results !== undefined) {
if(response[fields.categoryResults] !== undefined) {

// each category
$.each(response.results, function(index, category) {
if(category.results !== undefined && category.results.length > 0) {
html += ''
+ '<div class="category">'
+ '<div class="name">' + category.name + '</div>'
;
$.each(response[fields.categoryResults], function(index, category) {
if(category[fields.results] !== undefined && category.results.length > 0) {

html += '<div class="category">';

if(category[fields.categoryName] !== undefined) {
html += '<div class="name">' + category[fields.categoryName] + '</div>';
}

// each item inside category
$.each(category.results, function(index, result) {
html += '<div class="result">';
if(result.url) {
html += '<a href="' + result.url + '"></a>';
if(response[fields.url]) {
html += '<a class="result" href="' + response[fields.url] + '">';
}
if(result.image !== undefined) {
result.image = escape(result.image);
else {
html += '<a class="result">';
}
if(result[fields.image] !== undefined) {
html += ''
+ '<div class="image">'
+ ' <img src="' + result.image + '" alt="">'
+ ' <img src="' + result[fields.image] + '">'
+ '</div>'
;
}
html += '<div class="content">';
if(result.price !== undefined) {
result.price = escape(result.price);
html += '<div class="price">' + result.price + '</div>';
if(result[fields.price] !== undefined) {
html += '<div class="price">' + result[fields.price] + '</div>';
}
if(result.title !== undefined) {
result.title = escape(result.title);
html += '<div class="title">' + result.title + '</div>';
if(result[fields.title] !== undefined) {
html += '<div class="title">' + result[fields.title] + '</div>';
}
if(result.description !== undefined) {
html += '<div class="description">' + result.description + '</div>';
if(result[fields.description] !== undefined) {
html += '<div class="description">' + result[fields.description] + '</div>';
}
html += ''
+ '</div>'
+ '</div>'
;
html += '</a>';
});
html += ''
+ '</div>'
;
}
});
if(response.action) {
if(response[fields.action]) {
html += ''
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '<a href="' + response[fields.action][fields.actionURL] + '" class="action">'
+ response[fields.action][fields.actionText]
+ '</a>';
}
return html;
}
return false;
},
standard: function(response, settings) {
standard: function(response, fields) {
var
html = ''
;
if(response.results !== undefined) {
if(response[fields.results] !== undefined) {

// each result
$.each(response.results, function(index, result) {
if(result.url) {
html += '<a class="result" href="' + result.url + '">';
$.each(response[fields.results], function(index, result) {
if(response[fields.url]) {
html += '<a class="result" href="' + response[fields.url] + '">';
}
else {
html += '<a class="result">';
}
if(result.image !== undefined) {
if(result[fields.image] !== undefined) {
html += ''
+ '<div class="image">'
+ ' <img src="' + result.image + '">'
+ ' <img src="' + result[fields.image] + '">'
+ '</div>'
;
}
html += '<div class="content">';
if (settings.displayField.length > 0){
html += '<div class="title">' + result[settings.displayField] + '</div>';
}
if(result.price !== undefined) {
html += '<div class="price">' + result.price + '</div>';
if(result[fields.price] !== undefined) {
html += '<div class="price">' + result[fields.price] + '</div>';
}
if(result.title !== undefined) {
html += '<div class="title">' + result.title + '</div>';
if(result[fields.title] !== undefined) {
html += '<div class="title">' + result[fields.title] + '</div>';
}
if(result.description !== undefined) {
html += '<div class="description">' + result.description + '</div>';
if(result[fields.description] !== undefined) {
html += '<div class="description">' + result[fields.description] + '</div>';
}
html += ''
+ '</div>'
;
html += '</a>';
});

if(response.action) {
if(response[fields.action]) {
html += ''
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '<a href="' + response[fields.action][fields.actionURL] + '" class="action">'
+ response[fields.action][fields.actionText]
+ '</a>';
}
return html;
Expand Down

0 comments on commit 57ee104

Please sign in to comment.