I have OpenCart 1.4.9.2 installed.
I have the Search Sidebox Module installed works great! Currently if a customer enters text into the Search Text Input Box, the user has to click the "Search" button to perform a search....
What code do I need to add so that a user can hit the Enter key on the keyboard to perform the search instead of having to click the "Search" button?
I want to allow the user to be able to hit the <ENTER> key on the keyboard to perform a search. Any suggestions?
I see that the Sidebar Search Module uses two files to submit a search query....
catalog\view\theme\default\template\common\header.tpl
catalog\view\theme\default\template\module\sidebarsearch.tpl
sidebarsearch.tpl calls the moduleSearch Function in header.tpl
catalog\view\theme\default\template\common\header.tpl
catalog\view\theme\default\template\module\sidebarmodule.tpl
What code needs to be added to what file so that a user can submit the search by both clicking the "Search" button and by hitting the <ENTER> key on the keyboard?
Currently the code submits a search ONLY when the user clicks the "Search" button. Note that there is no form in sidebarsearch.tpl that gets submited when a search is performed... Any suggestions?
I see that the Sidebar Search Module uses two files to submit a search query....
catalog\view\theme\default\template\common\header.tpl
catalog\view\theme\default\template\module\sidebarsearch.tpl
sidebarsearch.tpl calls the moduleSearch Function in header.tpl
catalog\view\theme\default\template\common\header.tpl
Code: Select all
function moduleSearch() {
url = 'index.php?route=product/search';
var filter_keyword = $('#filter_keyword').attr('value')
if (filter_keyword) {
url += '&keyword=' + encodeURIComponent(filter_keyword);
}
var filter_category_id = $('#filter_category_id').attr('value');
if (filter_category_id) {
url += '&category_id=' + filter_category_id;
}
location = url;
}Code: Select all
<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/searchico.png" alt="" /><?php echo $heading_title; ?></div>
<div class="middle" style="text-align: center;">
<?php if ($keyword) { ?>
<input type="text" value="Search Keywords" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '000000'" style="color: #999;width:154px;">
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999; width:154px;" />
<?php } ?>
<select id="filter_category_id" style="width:158px;position:static;z-index:-1;">
<option value="0"><?php echo $text_category; ?></option>
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>
<option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="right" style="text-align: right;"><a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></div>
<div class="bottom"> </div>
</div>Currently the code submits a search ONLY when the user clicks the "Search" button. Note that there is no form in sidebarsearch.tpl that gets submited when a search is performed... Any suggestions?
Try to googling with "enable Enter key php", edit php and tpl files (not shure about changing templates). Do compare standard search and this one.
Still trying to get the "Search Sidebar Module" working the way I want.
Does anyone have any suggestions for how to have the search triggered when the user hits the <ENTER> key on the keyboard. Basically the user types in their search criteria in the search input box, then the user hits the <ENTER> key on the keyboard to submit their search.
Currently the only way to perform a search right now using this module is...the user types in their serach criteria in the search input box, then the user clicks the "Search" button.
I understand that there are really only 2 files that are used for the search, see code above....
catalog\view\theme\default\template\common\header.tpl
catalog\view\theme\default\template\module\sidebarmodule.tpl
Any suggestions?
Does anyone have any suggestions for how to have the search triggered when the user hits the <ENTER> key on the keyboard. Basically the user types in their search criteria in the search input box, then the user hits the <ENTER> key on the keyboard to submit their search.
Currently the only way to perform a search right now using this module is...the user types in their serach criteria in the search input box, then the user clicks the "Search" button.
I understand that there are really only 2 files that are used for the search, see code above....
catalog\view\theme\default\template\common\header.tpl
catalog\view\theme\default\template\module\sidebarmodule.tpl
Any suggestions?
I don't use this module, but OpenCart enables search by hitting Enter using the following bit of javascript in header.tpl
If the search box is in a div with id="search" that works. If id=something else you need to change #search in the above code to whatever the id is.
Hope that helps
Code: Select all
$('#search input').keydown(function(e) {
if (e.keyCode == 13) {
moduleSearch();
}
});Hope that helps
http://scarletandjones.com/
http://sharpdressedman.co.uk/
http://coffincompany.co.uk/
http://horsesculptures.co.uk/
If I've helped you out, why not buy me a beer? http://craigmurray.me.uk
Thank you. Fugured it out. I guess because the Sidebar Search Module does not use the header.php file, I had to put the function in the Sidebar Search Module php file and change the ID tag. Makes sense.
Thank you for your help.
Thank you for your help.
Here is my catalog\view\theme\default\template\module\sidebarsearch.tpl
Hope this helps.
Code: Select all
<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/searchico.png" alt="" /><?php echo $heading_title; ?></div>
<div id="search" class="left" style="text-align: left;">
<?php if ($keyword) { ?>
<table>
<tr>
<td><input type="text" value="Search Keywords" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '000000'" style="color: #999;width:90px;"></td>
<td><a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></td>
</tr>
</table>
<?php } else { ?>
<table>
<tr>
<td><input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999; width:90px;" /></td>
<td><a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></td>
</tr>
</table>
<?php } ?>
</div>
</div>
<script type="text/javascript"><!--
$('#search input').keydown(function(e) {
if (e.keyCode == 13) {
moduleSearch();
}
});
function moduleSearch() {
pathArray = location.pathname.split( '/' );
url = '<?php echo HTTP_SERVER; ?>';
url += 'index.php?route=product/search';
var filter_keyword = $('#filter_keyword').attr('value')
if (filter_keyword) {
url += '&keyword=' + encodeURIComponent(filter_keyword);
}
var filter_category_id = $('#filter_category_id').attr('value');
if (filter_category_id) {
url += '&category_id=' + filter_category_id;
}
location = url;
}
//--></script>This solution doesn't work for me.
Instead, what I've found works consistently (and still allows users to click the search button if they prefer) is to add a form around the search input, replace your submit links with a submit button, and ask it to execute the javascript command upon submitting.
For example:
So now your users can click the button OR simply hit enter. Their choice.
Again, I did the following:
1) Enclosed the search box in a form, added "onsubmit: javascript:moduleSearch();return false;" to the form tag.
2) Replaced the "a onclick='modulesearch()' class='button'"s with submit buttons.
Piece of cake!
I know it's been a while since this post has been updated, but I'm still using OpenCart 1.4.7. Too many store specific changes to my setup to update lol.
Instead, what I've found works consistently (and still allows users to click the search button if they prefer) is to add a form around the search input, replace your submit links with a submit button, and ask it to execute the javascript command upon submitting.
For example:
Code: Select all
<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/searchico.png" alt="" /><?php echo $heading_title; ?></div>
<div id="search" class="left" style="text-align: left;">
<form onsubmit="javascript:moduleSearch();return false;">
<?php if ($keyword) { ?>
<table>
<tr>
<td><input type="text" value="Search Keywords" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '000000'" style="color: #999;width:90px;"></td>
<td><input type="submit" value="<?php echo $button_go; ?>"></td>
</tr>
</table>
<?php } else { ?>
<table>
<tr>
<td><input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999; width:90px;" /></td>
<td><input type="submit" value="<?php echo $button_go; ?>"></td>
</tr>
</table>
<?php } ?>
</form>
</div>
</div>
//--></script>Again, I did the following:
1) Enclosed the search box in a form, added "onsubmit: javascript:moduleSearch();return false;" to the form tag.
2) Replaced the "a onclick='modulesearch()' class='button'"s with submit buttons.
Piece of cake!
I know it's been a while since this post has been updated, but I'm still using OpenCart 1.4.7. Too many store specific changes to my setup to update lol.
Hi!
Sorry to be all lame but where do I put the code to enable search with both click and enter?
This is a part of my "search.tpl"..
Many thanks!
Sorry to be all lame but where do I put the code to enable search with both click and enter?
Code: Select all
<div class="pagination"><?php echo $pagination; ?></div>
<?php } else { ?>
<div class="content"><?php echo $text_empty; ?></div>
<?php }?>
<?php echo $content_bottom; ?></div>
<script type="text/javascript"><!--
$('#content input[name=\'filter_name\']').keydown(function(e) {
if (e.keyCode == 13) {
$('#button-search').trigger('click');
}
});
$('#button-search').bind('click', function() {
url = 'index.php?route=product/search';Many thanks!
Or is it somewhere here, in my "header.tpl"?
Little bit further down I also found this in "header.tpl"
Damn, so many "search" so I dont know where to make the change.
As it is know, only when you click you search. You need enter to for todays youth
Code: Select all
<li class="side_search"><span class="icon">Search</span>
<div id="search">
<?php if ($filter_name) { ?>
<input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
<?php } else { ?>
<input type="text" name="filter_name" value="<?php echo $text_search; ?>" onclick="this.value = '';" onkeydown="this.style.color = '#777777';" />
<?php } ?>
<div class="button-search"></div>
</div>
</li>
</ul>
</div>Code: Select all
<div id="search">
<div class="button-search"></div>
<?php if ($filter_name) { ?>
<input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
<?php } else { ?>
<input type="text" name="filter_name" value="<?php echo $text_search; ?>" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
<?php } ?>
</div>As it is know, only when you click you search. You need enter to for todays youth
Who is online
Users browsing this forum: No registered users and 2 guests
