forked from Ponysearch/Ponysearch
oscar template: implement autocompleter
This commit is contained in:
Thomas Pointhuber
parent
4b7164f04a
commit
14b0604bc0
4 changed files with 219 additions and 1 deletions
189
searx/static/oscar/css/typeahead.css
Normal file
189
searx/static/oscar/css/typeahead.css
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
/*
|
||||
* typehead.js-bootstrap3.less
|
||||
* @version 0.2.3
|
||||
* https://github.com/hyspace/typeahead.js-bootstrap3.less
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
.has-warning .twitter-typeahead .tt-input,
|
||||
.has-warning .twitter-typeahead .tt-hint {
|
||||
border-color: #8a6d3b;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.has-warning .twitter-typeahead .tt-input:focus,
|
||||
.has-warning .twitter-typeahead .tt-hint:focus {
|
||||
border-color: #66512c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
||||
}
|
||||
.has-error .twitter-typeahead .tt-input,
|
||||
.has-error .twitter-typeahead .tt-hint {
|
||||
border-color: #a94442;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.has-error .twitter-typeahead .tt-input:focus,
|
||||
.has-error .twitter-typeahead .tt-hint:focus {
|
||||
border-color: #843534;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
}
|
||||
.has-success .twitter-typeahead .tt-input,
|
||||
.has-success .twitter-typeahead .tt-hint {
|
||||
border-color: #3c763d;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.has-success .twitter-typeahead .tt-input:focus,
|
||||
.has-success .twitter-typeahead .tt-hint:focus {
|
||||
border-color: #2b542c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
||||
}
|
||||
.input-group .twitter-typeahead:first-child .tt-input,
|
||||
.input-group .twitter-typeahead:first-child .tt-hint {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.input-group .twitter-typeahead:last-child .tt-input,
|
||||
.input-group .twitter-typeahead:last-child .tt-hint {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.input-group.input-group-sm .twitter-typeahead .tt-input,
|
||||
.input-group.input-group-sm .twitter-typeahead .tt-hint {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.input-group.input-group-sm .twitter-typeahead .tt-input,
|
||||
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
|
||||
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
|
||||
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
|
||||
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
|
||||
height: auto;
|
||||
}
|
||||
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
|
||||
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
|
||||
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
|
||||
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.input-group.input-group-lg .twitter-typeahead .tt-input,
|
||||
.input-group.input-group-lg .twitter-typeahead .tt-hint {
|
||||
height: 46px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
select.input-group.input-group-lg .twitter-typeahead .tt-input,
|
||||
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
|
||||
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
|
||||
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
|
||||
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
|
||||
height: auto;
|
||||
}
|
||||
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
|
||||
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
|
||||
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
|
||||
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
.input-group .twitter-typeahead {
|
||||
display: table-cell !important;
|
||||
float: left;
|
||||
}
|
||||
.twitter-typeahead .tt-hint {
|
||||
color: #999999;
|
||||
}
|
||||
.twitter-typeahead .tt-input {
|
||||
z-index: 2;
|
||||
}
|
||||
.twitter-typeahead .tt-input[disabled],
|
||||
.twitter-typeahead .tt-input[readonly],
|
||||
fieldset[disabled] .twitter-typeahead .tt-input {
|
||||
cursor: not-allowed;
|
||||
background-color: #eeeeee !important;
|
||||
}
|
||||
.tt-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
min-width: 160px;
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
background-clip: padding-box;
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
}
|
||||
.tt-dropdown-menu .tt-suggestion {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tt-dropdown-menu .tt-suggestion.tt-cursor {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: #f5f5f5;
|
||||
color: #262626;
|
||||
}
|
||||
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
|
||||
color: #262626;
|
||||
}
|
||||
.tt-dropdown-menu .tt-suggestion p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -7,6 +7,15 @@
|
|||
|
||||
*/
|
||||
|
||||
if(searx.autocompleter) {
|
||||
searx.searchResults = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
remote: '/autocompleter?q=%QUERY'
|
||||
});
|
||||
searx.searchResults.initialize();
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.btn-toggle .btn').click(function() {
|
||||
var btnClass = 'btn-' + $(this).data('btn-class');
|
||||
|
|
@ -42,4 +51,14 @@ $(document).ready(function(){
|
|||
$(".select-all-on-click").click(function () {
|
||||
$(this).select();
|
||||
});
|
||||
|
||||
if(searx.autocompleter) {
|
||||
$('#q').typeahead(null, {
|
||||
name: 'search-results',
|
||||
displayKey: function(result) {
|
||||
return result;
|
||||
},
|
||||
source: searx.searchResults.ttAdapter()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
7
searx/static/oscar/js/typeahead.bundle.min.js
vendored
Normal file
7
searx/static/oscar/js/typeahead.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -9,6 +9,7 @@
|
|||
<title>{% block title %}{% endblock %}searx</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css" />
|
||||
{% if autocomplete %}<link rel="stylesheet" href="{{ url_for('static', filename='css/typeahead.css') }}" type="text/css" />{% endif %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/oscar.css') }}" type="text/css" />
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
searx = {};
|
||||
searx.method = "{{ method or 'POST' }}";
|
||||
searx.autocompleter = {% if autocomplete %}true{% else %}false{% endif %};
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -62,6 +64,7 @@
|
|||
</div>
|
||||
<script src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||
{% if autocomplete %}<script src="{{ url_for('static', filename='js/typeahead.bundle.min.js') }}"></script>{% endif %}
|
||||
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue