Instant Search

[marcopm]

Thanks Marco, I'm sure that's the issue. Forgive me but "keyword" denotes CSS class or div? Or something else? Nothing I've tried has made a difference. I did check on the upload - all good.

If you're not sure how to do it, google "how to find css selector". Maybe post the selector here as well so we can check if it at least makes sense (but it depends on your template).

Also, again: are there errors in the developer console? And/or in the /logs directory?

[lat9]

This is where I find w3schools invaluable. See their article on CSS selectors: https://www.w3schools.com/css/css_selectors.asp

[dbltoe]

Good info. Another helpful item for me is to right-click on the item or area I want to modify and select inspect.

Whether you do that in Chrome or Firefox, it will bring up the elements on the left and Styles on the right.

Once you find the element you are wanting to modify, it might not have a style associated with it. If so, at the top of the styles list is a + sign. Clicking on that will create a new style and use the selector you need to use in your personalized stylesheet. You can add settings while in the inspect mode and then copy the finished selector to your custom stylesheet.

One additional step is for those selectors that you only want to modify in a particular spot. (remember they are often all-inclusive while classes and divs are not) Say, the p tags in the define_main_page and not the rest of the home page. In the elements side, look to see if that p tag has a class or ID. If not, start up the list of Elements untill you find a class or ID. You then add that to the p tag so that the browser knows to add that styling to only the p tags in the define_main_page. In a stock 1.5.8 Zen Cart using the responsive_classic template, the resultant selector to turn all the p tags in the define_main_page to red would be:

#indexDefaultMainContent p {
color: red;
{
}

The benefits are that, doing this while in the inspect mode, you can see if it is going to work before you add it to your custom stylesheet and the inspect mode will assist you in getting the proper syntax.

[delia]

Excuse me but I'm well versed in CSS - in fact that used to be my speciality - graphics to CSS

The configuration setting says
CSS selector of the search input box(es). You might need to change it if you're using a custom template and the results dropdown is not showing.

Default: input[name="keyword"]

So where is the CSS? The default lists keyword for name - which my site has. That's not CSS. Do I change the name/keyword to class/whatever or div/whatever?

[dbltoe]

Excuse me but I'm well versed in CSS - in fact that used to be my speciality - graphics to CSS

I would never cast dispersions upon or denigrate a guru.

I do like to take an opportunity to add helpful tips for those who lurk and stumble across this post later.

As to the keyword, you may need to find something like the datepicker in specials that sets the expiration date on line ~634.

$('input[name="expires_date"]').datepicker({

[delia]

To regroup here :

the dropdown is not showing.

In the instructions:
Dropdown - Input Box Selector : CSS selector of the search input box(es). You might need to change it if you're using a custom template and the results dropdown is not showing.

Default: input[name="keyword"]

So the default input listed as name / keyword WHICH IS NOT A CSS SELECTOR and is also present in my template.

The instant search css has css starting with instantSearchInputWrapper

The template does have a file for the ajax instant search dropdown that matches the CSS.

So I am having difficulty seeing that CSS actually is the problem. Yes, I'm using my own template based on the original sidebox files with no core changes and some additional CSS but mostly default zencart template. I have no added jquery in the site. I see no conflict or issues using the browser console.

I also just installed it on a default 15.8 cart with the responsive template and it doesn't work on it either.

[lat9]

To regroup here :

the dropdown is not showing.

In the instructions:
Dropdown - Input Box Selector : CSS selector of the search input box(es). You might need to change it if you're using a custom template and the results dropdown is not showing.

Default: input[name="keyword"]

So the default input listed as name / keyword WHICH IS NOT A CSS SELECTOR and is also present in my template.

The instant search css has css starting with instantSearchInputWrapper

The template does have a file for the ajax instant search dropdown that matches the CSS.

So I am having difficulty seeing that CSS actually is the problem. Yes, I'm using my own template based on the original sidebox files with no core changes and some additional CSS but mostly default zencart template. I have no added jquery in the site. I see no conflict or issues using the browser console.

I also just installed it on a default 15.8 cart with the responsive template and it doesn't work on it either.

er, the input[name="keyword"] is a valid CSS selector; see this (https://www.w3schools.com/cssref/sel...bute_value.php) link.

[delia]

er, the input[name="keyword"] is a valid CSS selector; see this (https://www.w3schools.com/cssref/sel...bute_value.php) link.

So why does it not work? I know how to troubleshoot CSS problems but there's nothing showing for me to look at.

AND if it doesn't work "out of the box" or for the responsive template and stumps an experienced person, I'm not sure I see the value here. I'm not accustomed to giving up but ....

[lat9]

So why does it not work? I know how to troubleshoot CSS problems but there's nothing showing for me to look at.

AND if it doesn't work "out of the box" or for the responsive template and stumps an experienced person, I'm not sure I see the value here. I'm not accustomed to giving up but ....

Do you have a customized template? The Instant Search plugin's jQuery/javascript is looking for changes to, by default, an input field named 'keyword' in order to send changes from that keyword-entry back to the site to gather matching products.

FWIW, the default responsive_classic uses the template_default/sideboxes/tpl_search.php and tpl_search_header.php to render the search-related sideboxes'. In both cases, an input field named 'keyword' is created to accept the customer's search keywords.

[delia]

Do you have a customized template? The Instant Search plugin's jQuery/javascript is looking for changes to, by default, an input field named 'keyword' in order to send changes from that keyword-entry back to the site to gather matching products.

FWIW, the default responsive_classic uses the template_default/sideboxes/tpl_search.php and tpl_search_header.php to render the search-related sideboxes'. In both cases, an input field named 'keyword' is created to accept the customer's search keywords.

Keyword is created.... how and where? Are you saying the mod does that or that is what is needed to be done? In the instructions it mentions keyword only as a name - not input but attribute of input. So you are saying there needs to be an actual input field (assumedly then hidden from view) that is called name?

No, no error logs or console errors.

People, no one has offered any sample - any code, any site. I don't maintain or create mods anymore but instructions are important. There are no instructions, just that one thing in the configuration.

I was interested when looking at github that there was a suggestion this mod be added into the template. I'm all for that - if only to ge the dang code etc.