richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

#2645 adds fields parameter for using custom server responses with search

pull/2869/head
Jack Lukic 9 years ago
parent
1720d1ccb8
commit
57ee1041f5
2 changed files with 71 additions and 54 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      RELEASE-NOTES.md
  2. 124
      src/definitions/modules/search.js

1
RELEASE-NOTES.md
View File

@ -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)**\

124
src/definitions/modules/search.js
View File

@ -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,
@ -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]);
}
}
}
@ -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 ) {
@ -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);
@ -1055,7 +1056,7 @@ $.fn.search.settings = {
'description'
],
// fields to search
displayField : '',
// field to display in standard results template
@ -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',
@ -1176,98 +1192,98 @@ $.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>'
@ -1275,10 +1291,10 @@ $.fn.search.settings = {
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;

Write Preview
Loading…
Cancel
Save