diff --git a/searx/static/oscar/css/typeahead.css b/searx/static/oscar/css/typeahead.css new file mode 100644 index 000000000..fde250d66 --- /dev/null +++ b/searx/static/oscar/css/typeahead.css @@ -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; +} diff --git a/searx/static/oscar/js/scripts.js b/searx/static/oscar/js/scripts.js index 296cddd94..6c3a10a74 100644 --- a/searx/static/oscar/js/scripts.js +++ b/searx/static/oscar/js/scripts.js @@ -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() + }); + } +}); diff --git a/searx/static/oscar/js/typeahead.bundle.min.js b/searx/static/oscar/js/typeahead.bundle.min.js new file mode 100644 index 000000000..11dcbf42e Binary files /dev/null and b/searx/static/oscar/js/typeahead.bundle.min.js differ diff --git a/searx/templates/oscar/base.html b/searx/templates/oscar/base.html index 119533933..7507fcab1 100644 --- a/searx/templates/oscar/base.html +++ b/searx/templates/oscar/base.html @@ -9,6 +9,7 @@ {% block title %}{% endblock %}searx + {% if autocomplete %}{% endif %} @@ -28,6 +29,7 @@ @@ -62,6 +64,7 @@ + {% if autocomplete %}{% endif %}