OpenCart Community

Posted: **Sat Nov 27, 2010 3:09 am**

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?

Posted: **Sun Nov 28, 2010 5:58 am**

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

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;
}

catalog\view\theme\default\template\module\sidebarmodule.tpl

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">&nbsp;</div>
</div>

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?

Posted: **Thu Dec 02, 2010 11:43 pm**

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.

Posted: **Wed Dec 15, 2010 1:24 am**

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?

Posted: **Sat Jan 08, 2011 12:20 pm**

I can't watch it. not demo???

Posted: **Sat Jan 08, 2011 6:15 pm**

I don't use this module, but OpenCart enables search by hitting Enter using the following bit of javascript in header.tpl

Code: Select all

$('#search input').keydown(function(e) {
	if (e.keyCode == 13) {
		moduleSearch();
	}
});

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

Posted: **Sat Jan 08, 2011 11:08 pm**

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.

Posted: **Tue Mar 15, 2011 10:42 pm**

Can you post a code you add to search module or link to your website?

Posted: **Wed Mar 16, 2011 10:36 pm**

Here is my catalog\view\theme\default\template\module\sidebarsearch.tpl

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>

Hope this helps.

Posted: **Thu Jun 23, 2011 10:18 am**

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:

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>

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.

Posted: **Thu Apr 12, 2012 3:45 am**

Hi!

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';

This is a part of my "search.tpl"..

Many thanks!

Posted: **Thu Apr 12, 2012 4:02 am**

Or is it somewhere here, in my "header.tpl"?

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>

Little bit further down I also found this in "header.tpl"

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>

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

OpenCart Community

Search Sidebar Module, click "Search"button or Enter key

Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key

Re: Search Sidebar Module, click "Search"button or Enter key