Ad the new autocomplete search. re #34
This commit is contained in:
parent
4b2785e2b0
commit
e2838ee3d9
|
@ -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
|
||||
========================================================================== */
|
||||
|
|
|
@ -44,4 +44,15 @@ header {
|
|||
.download a {
|
||||
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
27
util.js
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue