get autocomplete working again with new typeahead.js, but not the CSS
This commit is contained in:
parent
4139c2c84a
commit
43624caf88
1 changed files with 87 additions and 73 deletions
|
@ -477,95 +477,109 @@ Metamaps.GlobalUI.Search = {
|
||||||
var topics = {
|
var topics = {
|
||||||
name: 'topics',
|
name: 'topics',
|
||||||
limit: 9999,
|
limit: 9999,
|
||||||
dupChecker: function (datum1, datum2) {
|
|
||||||
return false;
|
display: function(s) { return s.label; },
|
||||||
},
|
templates: {
|
||||||
template: $('#topicSearchTemplate').html(),
|
notFound: function(s) {
|
||||||
remote: {
|
return Hogan.compile($('#topicSearchTemplate').html()).render({
|
||||||
url: '/search/topics?term=%QUERY',
|
value: "No results",
|
||||||
replace: function () {
|
label: "No results",
|
||||||
var q = '/search/topics?term=' + $('.sidebarSearchField').val();
|
typeImageURL: "<%= asset_path('icons/wildcard.png') %>",
|
||||||
if (Metamaps.Active.Mapper && $("#limitTopicsToMe").is(':checked')) {
|
rtype: "noresult"
|
||||||
q += "&user=" + Metamaps.Active.Mapper.id.toString();
|
});
|
||||||
}
|
},
|
||||||
return q;
|
header: topicheader,
|
||||||
|
suggestion: function(s) {
|
||||||
|
return Hogan.compile($('#topicSearchTemplate').html()).render(s);
|
||||||
},
|
},
|
||||||
filter: function (dataset) {
|
|
||||||
if (dataset.length == 0) {
|
|
||||||
dataset.push({
|
|
||||||
value: "No results",
|
|
||||||
label: "No results",
|
|
||||||
typeImageURL: "<%= asset_path('icons/wildcard.png') %>",
|
|
||||||
rtype: "noresult"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return dataset;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
engine: Hogan,
|
source: new Bloodhound({
|
||||||
header: topicheader
|
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||||
|
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||||
|
remote: {
|
||||||
|
url: '/search/topics',
|
||||||
|
prepare: function(query, settings) {
|
||||||
|
settings.url += '?term=' + $('.sidebarSearchField').val();
|
||||||
|
if (Metamaps.Active.Mapper && $("#limitTopicsToMe").is(':checked')) {
|
||||||
|
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
|
||||||
|
}
|
||||||
|
return settings;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
|
|
||||||
var maps = {
|
var maps = {
|
||||||
name: 'maps',
|
name: 'maps',
|
||||||
limit: 9999,
|
limit: 9999,
|
||||||
dupChecker: function (datum1, datum2) {
|
display: function(s) { return s.label; },
|
||||||
return false;
|
templates: {
|
||||||
},
|
notFound: function(s) {
|
||||||
template: $('#mapSearchTemplate').html(),
|
return Hogan.compile($('#mapSearchTemplate').html()).render({
|
||||||
remote: {
|
value: "No results",
|
||||||
url: '/search/maps?term=%QUERY',
|
label: "No results",
|
||||||
replace: function () {
|
rtype: "noresult"
|
||||||
var q = '/search/maps?term=' + $('.sidebarSearchField').val();
|
});
|
||||||
if (Metamaps.Active.Mapper && $("#limitMapsToMe").is(':checked')) {
|
},
|
||||||
q += "&user=" + Metamaps.Active.Mapper.id.toString();
|
header: mapheader,
|
||||||
}
|
suggestion: function(s) {
|
||||||
return q;
|
return Hogan.compile($('#mapSearchTemplate').html()).render(s);
|
||||||
},
|
},
|
||||||
filter: function (dataset) {
|
|
||||||
if (dataset.length == 0) {
|
|
||||||
dataset.push({
|
|
||||||
value: "No results",
|
|
||||||
label: "No results",
|
|
||||||
rtype: "noresult"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return dataset;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
engine: Hogan,
|
source: new Bloodhound({
|
||||||
header: mapheader
|
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||||
|
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||||
|
remote: {
|
||||||
|
url: '/search/maps',
|
||||||
|
prepare: function(query, settings) {
|
||||||
|
settings.url += '?term=' + $('.sidebarSearchField').val();
|
||||||
|
if (Metamaps.Active.Mapper && $("#limitMapsToMe").is(':checked')) {
|
||||||
|
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
|
||||||
|
}
|
||||||
|
return settings;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
|
|
||||||
var mappers = {
|
var mappers = {
|
||||||
name: 'mappers',
|
name: 'mappers',
|
||||||
limit: 9999,
|
limit: 9999,
|
||||||
dupChecker: function (datum1, datum2) {
|
display: function(s) { return s.label; },
|
||||||
return false;
|
templates: {
|
||||||
|
notFound: function(s) {
|
||||||
|
return Hogan.compile($('#mapperSearchTemplate').html()).render({
|
||||||
|
value: "No results",
|
||||||
|
label: "No results",
|
||||||
|
rtype: "noresult",
|
||||||
|
profile: "<%= asset_path('user.png') %>",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
header: mapperheader,
|
||||||
|
suggestion: function(s) {
|
||||||
|
return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
template: $('#mapperSearchTemplate').html(),
|
source: new Bloodhound({
|
||||||
remote: {
|
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||||
url: '/search/mappers?term=%QUERY',
|
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||||
filter: function (dataset) {
|
remote: {
|
||||||
if (dataset.length == 0) {
|
url: '/search/maps?term=%QUERY',
|
||||||
dataset.push({
|
wildcard: '%QUERY',
|
||||||
profile: "<%= asset_path('user.png') %>",
|
},
|
||||||
|
}),
|
||||||
value: "No results",
|
|
||||||
label: "No results",
|
|
||||||
rtype: "noresult"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return dataset;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
engine: Hogan,
|
|
||||||
header: mapperheader
|
|
||||||
};
|
};
|
||||||
$('.sidebarSearchField').typeahead([topics, maps, mappers]);
|
|
||||||
|
// Take all that crazy setup data and put it together into one beautiful typeahead call!
|
||||||
|
$('.sidebarSearchField').typeahead(
|
||||||
|
{
|
||||||
|
highlight: true,
|
||||||
|
},
|
||||||
|
[topics, maps, mappers]
|
||||||
|
);
|
||||||
|
|
||||||
//Set max height of the search results box to prevent it from covering bottom left footer
|
//Set max height of the search results box to prevent it from covering bottom left footer
|
||||||
$('.sidebarSearchField').bind('typeahead:suggestionsRendered', function (event) {
|
$('.sidebarSearchField').bind('typeahead:render', function (event) {
|
||||||
self.initSearchOptions();
|
self.initSearchOptions();
|
||||||
self.hideLoader();
|
self.hideLoader();
|
||||||
var h = $(window).height();
|
var h = $(window).height();
|
||||||
|
@ -577,7 +591,7 @@ Metamaps.GlobalUI.Search = {
|
||||||
});
|
});
|
||||||
|
|
||||||
// tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
|
// tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
|
||||||
$('.sidebarSearchField').bind('typeahead:selected', self.handleResultClick);
|
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
|
||||||
|
|
||||||
// don't do it, if they clicked on a 'addToMap' button
|
// don't do it, if they clicked on a 'addToMap' button
|
||||||
$('.sidebarSearch button.addToMap').click(function (event) {
|
$('.sidebarSearch button.addToMap').click(function (event) {
|
||||||
|
@ -585,7 +599,7 @@ Metamaps.GlobalUI.Search = {
|
||||||
});
|
});
|
||||||
|
|
||||||
// make sure that when you click on 'limit to me' or 'toggle section' it works
|
// make sure that when you click on 'limit to me' or 'toggle section' it works
|
||||||
$('.sidebarSearchField').bind('typeahead:queryChanged', function(){
|
$('.sidebarSearchField').bind('typeahead:change', function(){
|
||||||
if ($(this).val() === "") {
|
if ($(this).val() === "") {
|
||||||
self.hideLoader();
|
self.hideLoader();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue