Personal/cops
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Ad the new autocomplete search. re #34

Browse source
This commit is contained in:
Sébastien Lucas 2013-10-15 19:07:12 +02:00
parent 4b2785e2b0
commit e2838ee3d9
3 changed files with 72 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
styles/style-base.css
View file

@ -321,12 +321,16 @@ width:100%;
/*-------------Search Aside-------------*/
#tool input[type=text]
#tool input[type=text], .twitter-typeahead
{
vertical-align: middle;
width: 100%;
}
.tt-hint, .tt-query {
width: 100%;
}
.stop select
{
vertical-align: middle;
@ -350,6 +354,35 @@ vertical-align: middle;
width: 100%;
}
.tt-dropdown-menu {
width: 322px;
text-align: left;
margin-top: 6px;
color: #000066;
padding: 4px 0;
background-color: #fff;
border: 1px solid #ccc;
}
.tt-header {
border-bottom: 1px solid #CCCCCC;
font-weight: bold;
}
.tt-suggestion {
padding: 3px 20px;
line-height: 14px;
}
.tt-suggestion.tt-is-under-cursor {
color: #1c1c1c;
background-color: #778899;
}
.tt-suggestion p {
margin: 0;
}
/* =============================================================================
Mediaquerie stuff goes here
========================================================================== */

11
styles/style-eink.css
View file

@ -45,3 +45,14 @@ header {
background: black;
color: white;
}
.tt-dropdown-menu {
color: black;
background-color: white;
border: 1px solid #ccc;
}
.tt-suggestion.tt-is-under-cursor {
color: black;
background-color: white;
}

27
util.js
View file

@ -256,6 +256,33 @@ function updatePage (data) {
} else {
$("#sortForm").hide ();
}
//$('input[name=query]').typeahead('destroy');
$('input[name=query]').typeahead([
{
name: 'search',
allowDuplicates: true,
minLength : 3,
valueKey: 'title',
limit: 24,
template: templateSuggestion,
remote: {
url: 'getJSON.php?search=1&db=%DB&query=%QUERY',
replace: function (url, query) {
return url.replace('%QUERY', query).replace('%DB', currentData.databaseId);
}
}
}
]);
$('input[name=query]').bind('typeahead:selected', function(obj, datum) {
//alert(JSON.stringify(obj)); // object
// outputs, e.g., {"type":"typeahead:selected","timeStamp":1371822938628,"jQuery19105037956037711017":true,"isTrigger":true,"namespace":"","namespace_re":null,"target":{"jQuery19105037956037711017":46},"delegateTarget":{"jQuery19105037956037711017":46},"currentTarget":
//alert(JSON.stringify(datum)); // contains datum value, tokens and custom fields
// outputs, e.g., {"redirect_url":"http://localhost/test/topic/test_topic","image_url":"http://localhost/test/upload/images/t_FWnYhhqd.jpg","description":"A test description","value":"A test value","tokens":["A","test","value"]}
// in this case I created custom fields called 'redirect_url', 'image_url', 'description'
navigateTo (datum.navlink);
});
}
function navigateTo (url) {