© Kademi 2022
jQuery OrgFinder v1.0.1
Change logs
- Support suggestion by using GoogleMap PlaceServices
- Support search by multi-orgtype
Configuration
| Name | Type | Description |
|---|---|---|
| initLatLng | Array<Number> | Initialized latitude and longitude of map |
| initZoomLevel | Number | Initialized zoom level of map |
| initQuery | String | Initialized search query |
| googleAPIKey | String | Google API key |
| searchUrl | String | Search URL. Must be link to signup page of a group or /organisations/ (if you use this plugin in Kademi admin console) |
| orgTypes | Array | List of organisation types. It's optional |
| template | String | Template string for orgFinder. Form search must has 'org-finder-search' class, textbox must be named 'q' and selectbox for organisation types must be named 'orgType'. Items list wrapper must has 'org-finder-list' class. Suggestion list wrapper must has 'org-finder-suggestions' class. Map div must has class 'org-finder-map' |
| onReady | Function | Callback will be called when orgFinder is ready. Arguments: 'formSearch', 'itemsWrapper', 'mapDiv' |
| onSelect | Function | Callback will be called when click on marker on map or item in org list panel. Arguments: 'orgData', 'item', 'marker', 'infoWindow' |
| onSearch | Function | Callback will be called when when search a keyword. Arguments: 'query' |
| beforeSearch | Function | Callback will be called before searching a keyword. This callback must be return data object which will be sent to server. Arguments: 'query', 'data' |
| onSearched | Function | Callback will be called after searching a keyword. Arguments: 'query', 'resp' |
| renderItemContent | Function | Method for rendering content of an item in organization list. If you don't want to show this organization, just return null or empty. Arguments: 'orgData' |
| renderMarkerContent | Function | Method for rendering content for InfoWindow of a marker on Google Map. If you don't want to show this organization, just return null or empty. Arguments: 'orgData' |
| renderSuggestionContent | Function | Method for rendering content for suggestions list. If you don't want to show this organization, just return null or empty. Arguments: 'data' |
| emptyItemText | String | Text will be showed when there is no result in organization list |
| emptySuggestionText | String | Text will be showed when there is no suggestion in suggestions list |
Default Configuration
{
initLatLng: [],
initZoomLevel: 15,
initQuery: null,
googleAPIKey: null,
searchUrl: null,
orgTypes: null,
template: '<form role="form" class="form-horizontal form-search org-finder-search" action="" style="margin-bottom: 15px;">' +
' <div class="input-group input-group-lg">' +
' <div class="clearfix dropdown">' +
' <input type="text" name="q" class="form-control" placeholder="Enter keyword to search..." value="" autocomplete="off" />' +
' <div class="dropdown-menu org-finder-suggestions" style="width: 100%;"></div>' +
' </div>' +
' <span class="input-group-btn">' +
' <select name="orgType" class="selectpicker"></select>' +
' <button class="btn btn-default" type="submit">Search</button>' +
' </span>' +
' </div>' +
'</form>' +
'<div class="row" style="margin-bottom: 40px;">' +
' <div class="col-md-4">' +
' <div class="panel panel-default">' +
' <div class="panel-heading">List stores</div>' +
' <div class="list-group org-finder-list" style="overflow-y: auto;"></div>' +
' </div>' +
' </div>' +
' <div class="col-md-8">' +
' <div class="embed-responsive embed-responsive-16by9">' +
' <div class="embed-responsive-item org-finder-map"></div>' +
' </div>' +
' </div>' +
'</div>'
,
onReady: function (formSearch, itemsWrapper, mapDiv) {
},
onSelect: function (orgData, item, marker, infoWindow) {
},
onSearch: function (query) {
},
beforeSearch: function (query, data) {
return data;
},
onSearched: function (query, resp) {
},
renderItemContent: function (orgData) {
var itemContent = '';
itemContent += '<h4 class="list-group-item-heading">' + (orgData.orgTypeDisplayName || orgData.title ) + '</h4>';
if (orgData.phone) {
itemContent += '<p class="list-group-item-text"><strong>Phone:</strong> ' + orgData.phone + '</p>';
}
if (orgData.email) {
itemContent += '<p class=list-group-item-text"><strong>Email:</strong> <a href="mailto:' + orgData.email + '">' + orgData.email + '</a></p>';
}
if (orgData.address) {
itemContent += '<p class="list-group-item-text"><strong>Address:</strong> ' + orgData.address + '</p>';
}
if (orgData.addressLine2) {
itemContent += '<p class=list-group-item-text"><strong>Address Line 2:</strong> ' + orgData.addressLine2 + '</p>';
}
if (orgData.addressState) {
itemContent += '<p class="list-group-item-text"><strong>State:</strong> ' + orgData.addressState + '</p>';
}
if (orgData.country) {
itemContent += '<p class="list-group-item-text"><strong>Country:</strong> ' + orgData.country + '</p>';
}
if (orgData.postcode) {
itemContent += '<p class="list-group-item-text"><strong>Postcode:</strong> ' + orgData.postcode + '</p>';
}
return '<div class="list-group-item">' + itemContent + '</div>';
},
renderMarkerContent: function (orgData) {
var markerContent = '';
markerContent += '<h1>' + (orgData.orgTypeDisplayName || orgData.title ) + '</h1>';
if (orgData.phone) {
markerContent += '<div><strong>Phone:</strong> ' + orgData.phone + '</div>';
}
if (orgData.email) {
markerContent += '<div><strong>Email:</strong> <a href="mailto:' + orgData.email + '">' + orgData.email + '</a></div>';
}
if (orgData.address) {
markerContent += '<div><strong>Address:</strong> ' + orgData.address + '</div>';
}
if (orgData.addressLine2) {
markerContent += '<div><strong>Address Line 2:</strong> ' + orgData.addressLine2 + '</div>';
}
if (orgData.addressState) {
markerContent += '<div><strong>State:</strong> ' + orgData.addressState + '</div>';
}
if (orgData.country) {
markerContent += '<div><strong>Country:</strong> ' + orgData.country + '</div>';
}
if (orgData.postcode) {
markerContent += '<div><strong>Postcode:</strong> ' + orgData.postcode + '</div>';
}
return '<div>' + markerContent + '</div>';
},
renderSuggestionContent: function (data) {
var suggestionContent = data.formatted_address;
return '<li><a>' + suggestionContent + '</a></li>';
},
emptyItemText: '<div class="list-group-item text-muted">No result</li>',
emptySuggestionText: '<li class="disabled"><a>No suggestion</a></li>'
}
Hide comments
