[SOLVED] Ajax search css?

[bloggus]

Can't find which CSS code has to be modified to change colors and size of the ajax search results windows.

Any help appritiated ....

[rocky]

It's in css/jquery.autocomplete.css in the root directory of PrestaShop.

[DarrenF]

How do you change the width of the autocomplete box? My search is on the right hand side of my site and when the autocomplete opens it goes off screen. I can see it's set to 500px but I can't find where.

[rocky]

It's on line 32 of modules/blocksearch/blocksearch-top.tpl (in PrestaShop v1.3.6):

width:500,

[DarrenF]

Ok I changed 500 to 250 but no change on the front end?

<!-- Block search module TOP -->

   <form method="get" action="{$base_dir}search.php" id="searchbox">


<!-- image on background -->
       <input type="hidden" name="orderby" value="position" />
       <input type="hidden" name="orderway" value="desc" />
       <input type="text" id="search_query" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" />
       <input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="button" />

   </form>

{if $ajaxsearch}
   [removed]{literal}
       $('document').ready( function() {
           $("#search_query")
               .autocomplete(
                   '{/literal}{if $search_ssl == 1}{$base_dir_ssl}{else}{$base_dir}{/if}{literal}search.php', {
                       minChars: 3,
                       max: 10,
                       width: 250,
                       selectFirst: false,
                       scroll: false,
                       dataType: "json",
                       formatItem: function(data, i, max, value, term) {
                           return value;
                       },
                       parse: function(data) {
                           var mytab = new Array();
                           for (var i = 0; i < data.length; i++) {
                               mytab[mytab.length] = { 
                                   data: data[i], 
                                   value: data[i].cname + ' > ' + data[i].pname 
                               };
                           }
                           return mytab;
                       },
                       extraParams: {
                           ajaxSearch: 1,
                           id_lang: {/literal}{$cookie->id_lang}{literal}
                       }
                   }
               )
               .result(function(event, data, formatted) {
                   $('#search_query').val(data.pname);
                   document.location.href = data.product_link;
               })
       });{/literal}
   [removed]
{/if}
<!-- /Block search module TOP -->

[rocky]

That should work. Try changing modules/blocksearch/blocksearch.tpl. Also, check whether the files have been overridden inside your theme. So there 4 files you need to check: themes//modules/blocksearch/blocksearch.tpl, themes//modules/blocksearch/blocksearch-top.tpl, modules/blocksearch/blocksearch.tpl and modules/blocksearch/blocksearch-top.tpl.

[DarrenF]

Got it:

themes//modules/blocksearch/blocksearch.tpl

that worked. Thanks

[bloggus]

Thank you rocky for all help! It worked like a charm!

(I've missed the answers since it seems I don't get any emails for the subscribed threads. WIll look into that ...)

[JQuiroga]

Hi, regarding this issue...
how do you change the position of the box results, by default I have these Style Attributes:

left: 818px;
position: absolute;
top: 124px;
width: 500px;

After reading this topic I know now where's the widht, but what about left and top, where can I change these values??

Thanks

[JQuiroga]

Never mind, I figured out...

I created a new css style at jquery.autocomplete.css called div.ac_results
and I overrided the style attributes with my own values using !important
here's how:

div.ac_results {
   display: block!important;
   left: 618px!important;
   position: absolute!important;
   top: 135px!important;
   width: 430px!important;
}

[zeisei]

Thank you JQuiroga,
very nice.

If someone finds how to display in the search results pop up, without URL rewritting functionality, it would be very nice.

[Bazze]

How to override this css file in your theme folder? Is there a way to override core css files in your theme?

[mmsh]

Never mind, I figured out...

I created a new css style at jquery.autocomplete.css called div.ac_results

and I overrided the style attributes with my own values using !important

here's how:

div.ac_results {
display: block!important;
left: 618px!important;
position: absolute!important;
top: 135px!important;
width: 430px!important;
}

 

if i put this into jquery.autocomplete.css it works but it doesn't hide the box when you click outside...the box always remains visible after you type something to search.

How to avoid?

Thanks

 

OK, found...it's enough to remove display: block!important;

SOLVED... thanks

[reinoplantae]

Hello,

 

please take a look at my top search box: www.reinoplantae.com ... it's messed up. I can't move the text field without moving the "Search" button also... it doesn't move independently. I've tried all the css involved (global and blocksearch css) and php and nothing have worked.

 

SOLVED: used blocksearch.php from older PS version (1.4.5.1) - jquery.autocomplete.css in private function (_hookCommon($params)), not in the public function as it was in my 1.4.6.2