Reply To: Customize ajax search


Ernest Marcinko


1. The results container in floating mode (default) always follows the search bar width, that to make sure it fits to the screen. It very much depends on the exact situation, but for starters I would try a custom CSS, something like this:

div[id*=ajaxsearchprores] {
    width: 90% !important;
    left: 5% !important;

.. or maybe this one:

div[id*=ajaxsearchprores] {
    width: 100% !important;
    left: 0 !important;

The results containers parent is always the 'body' element, and is positioned absolutely in hovering mode. Therefore these rules will tell it to get a 100% or 90% width, relative to the body width, and give it a left position of half of the remaining body width – 0 in case of 100%, and 5% in case of 90%.

This is just a wild guess, again, this depends on the exact site structure and layout. For manipulation, always use custom CSS, that will make sure it's not overwritten during updates.

2. This will very likely require a major customization, depending on your situation.

There is actually a way to make changes to some of the layout files as described in this knowledge base article: Results templating

Changing any other files will definitely get lost after an update. I would highly recommend not changing anything in the \ajax-search-pro\includes\views\asp.shortcode.results.php file if possible. If you need to place things in there, either use a javascript along with the Plugin javascript API, or use the action points found in that file.

Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)