<style>
div.myac {
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
div.myac ul {
list-style: none;
}
div.myac ul li > a {
display: block;
}
div.myac ul li > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
}
</style>
% if (!model_class->can("autocomplete")) {
<div class="well">
Please select <%= a_printable(current_object) %> using one of the other menu items.
% if ($self->app->routes->find(current_object."/list")) {
<br> For instance, the <%= link_to current_object."/list" => begin %> list <% end %> page.
% if ($self->app->routes->find(current_object."/search")) {
<br> Or the <%= link_to current_object."/search" => begin %> search <% end %> page.
% }
% } else {
% if ($self->app->routes->find(current_object."/search")) {
<br> For instance, the <%= link_to current_object."/search" => begin %> search <% end %> page.
% }
% }
</div>
% } else {
<div class="well">
Search for <%= a_printable(current_object) %>, then press tab to select one.<br>
<input type="text" data-provide="typeahead" id="ta" style='width:100%;margin-bottom:0px;'>
<div id="results" class="myac"> </div>
</div>
%# Uses https://github.com/mlmorg/bootstrap
%= javascript begin
$('#ta').typeahead({
source : function () {
$.get( "<%= url_for("$object/autocomplete") %>?q="
+ encodeURIComponent($("#ta").val())
+ "&tab="
+ encodeURIComponent("<%= current_tab =%>")
, []
, function(data,textStatus,jqXHR) {
$("#searchq").html($("#ta").val());
var out = '<ul>';
$.each(data, function ( i, v ) {
out = out + '<li>' + '<a href="' + v.href + '">' + v.name + '</a>' + '</li>';
} );
out = out + '</ul>';
$("#results").html(out);
}
);
}
})
%= end
% }