// search field WIP

This commit is contained in:
Kevin Granger
2013-10-21 18:03:00 +02:00
parent 5f75439a6b
commit 2e13013657
7 changed files with 149 additions and 48 deletions
+80 -5
View File
@@ -216,30 +216,105 @@
<div class="collapse navbar-collapse navbar-collapse-primary">
<form id="header_search" method="post" action="index.php?controller=AdminSearch&amp;token={getAdminToken tab='AdminSearch'}" role="search">
<div class="form-group">
<input type="hidden" name="bo_search_type" id="bo_search_type" />
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i id="search_type_icon" class="icon-reorder"></i>
<i class="icon-caret-down"></i>
</button>
<ul id="header_search_options" class="dropdown-menu">
<li class="search-all search-option active"><a href="#" data-value="0" data-placeholder="{l s='TODO'}"><i class="icon-search"></i> {l s='Everywhere'}</a></li>
<li class="divider"></li>
<li class="search-book search-option">
<a href="#" data-value="1" data-placeholder="{l s='TODO'}" data-icon="icon-book">
<i class="icon-book"></i> {l s='Catalog'}
</a>
</li>
<li class="search-customers-name search-option">
<a href="#" data-value="2" data-placeholder="{l s='TODO'}" data-icon="icon-group">
<i class="icon-group"></i> {l s='Customers'} {l s='by name'}
</a>
</li>
<li class="search-customers-addresses search-option">
<a href="#" data-value="6" data-placeholder="{l s='TODO'}" data-icon="icon-desktop">
<i class="icon-desktop"></i> {l s='Customers'} {l s='by ip address'}</a>
</li>
<li class="search-orders search-option">
<a href="#" data-value="3" data-placeholder="{l s='TODO'}" data-icon="icon-credit-card">
<i class="icon-credit-card"></i> {l s='Orders'}
</a>
</li>
<li class="search-invoices search-option">
<a href="#" data-value="4" data-placeholder="{l s='TODO'}" data-icon="icon-book">
<i class="icon-book"></i> {l s='Invoices'}
</a>
</li>
<li class="search-carts search-option">
<a href="#" data-value="5" data-placeholder="{l s='TODO'}" data-icon="icon-shopping-cart">
<i class="icon-shopping-cart"></i> {l s='Carts'}
</a>
</li>
<li class="search-modules search-option">
<a href="#" data-value="7" data-placeholder="{l s='TODO'}" data-icon="icon-puzzle-piece">
<i class="icon-puzzle-piece"></i> {l s='Modules'}
</a>
</li>
</ul>
</div>
<input type="text" class="form-control" name="bo_query" id="bo_query" value="{$bo_query}" placeholder="{l s='Search'}" />
<span class="input-group-btn">
<button type="submit" id="bo_search_submit" class="btn btn-default">
<button type="submit" id="bo_search_submit" class="btn btn-primary">
<i class="icon-search"></i>
</button>
</span>
<input type="text" class="form-control" name="bo_query" id="bo_query" value="{$bo_query}" placeholder="{l s='Search'}"/>
</div>
</div>
<!-- //todo Search in section
<script>
$('#bo_query').on('blur', function(){ $('#header_search .form-group').removeClass('focus-search'); });
$('#header_search *').on('focus', function(){ $('#header_search .form-group').addClass('focus-search'); });
$('#header_search_options').on('click','li a', function(e){
e.preventDefault();
$('#header_search_options .search-option').removeClass('active');
$('#bo_search_type').val($(this).data('value'));
$('#search_type_icon').removeAttr("class").addClass($(this).data('icon'));
$('#bo_query').attr("placeholder",$(this).data('placeholder'));
$('#bo_query').focus();
});
</script>
<!-- js
size up search field on focus
prevent blank search
dropdown menu as select
- fill input hidden field with data value from list item
- change icon in suffix
- set active on right list item
- focus input field
- change place holder
-->
<!-- //todo Search in section
<select name="bo_search_type" id="bo_search_type" class="chosen no-search">
<option value="0">{l s='everywhere'}</option>
<option value="1" {if {$search_type} == 1} selected="selected" {/if}>{l s='catalog'}</option>
<optgroup label="{l s='customers'}:">
<option value="2" {if {$search_type} == 2} selected="selected" {/if}>{l s='by name'}</option>
<option value="6" {if {$search_type} == 6} selected="selected" {/if}>{l s='by ip address'}</option>
</optgroup>
<option value="3" {if {$search_type} == 3} selected="selected" {/if}>{l s='orders'}</option>
<option value="4" {if {$search_type} == 4} selected="selected" {/if}>{l s='invoices'}</option>
<option value="5" {if {$search_type} == 5} selected="selected" {/if}>{l s='carts'}</option>
<option value="7" {if {$search_type} == 7} selected="selected" {/if}>{l s='modules'}</option>
</select> -->
</select> -->
</form>
{if count($quick_access) > 0}
<ul id="header_quick">
<li class="dropdown">
@@ -257,7 +332,7 @@
{if {$base_url}}
<li>
<a href="{$base_url}" id="header_foaccess" target="_blank" title="{l s='View my shop'}">
<i class="icon-eye-open"></i> {l s='View my shop'}
<i class="icon-star"></i> {l s='View my shop'}
</a>
</li>
{/if}