Power Search Auto Complete

[lesliekirk]

Re: Power Search Auto Complete

Hi Leslie,

The appearance of a basic select dropdown sounds like missing CSS to me. Or do you mean to say it functions as expected and then when you try to submit the search it opens a dropdown instead? It would help to be able to see the feature in action - have you submitted a ticket to support for this yet? If so, can you post or PM me the ticket ID?

Thanks

Since this post is being referenced in another thread, I'm coming back to it because, yes I have opened a support ticket on it with Miva Support. I also have had Brennan looking at it. Yes, I sent a PM to Kyle. Yes, it appears to be some sort of CSS issue. I thought it might have been something javascript related but I still have the issue when I removed all other javascript from the test page. I also have an issue with only one of the form fields working, but at this point I've given up trying to figure out why the AUTO2 page doesn't work and while the AUTO1 page does.


The problem that I can't seem to resolve is the appearance of a form style select menu below the form field after the keyword is completely typed.

Here's the test page URL.

[lesliekirk]

Re: Power Search Auto Complete

Update on this - I'm attempting a final implementation of this. I placed the working search field in what will be it's final location. I have a z-index problem using Firefox. The auto-select drops down behind any content on the page. Since placing the "working" search box into it's final location, the search box on the page no longer offers the auto-complete. A half step forward and 3 steps back...arggghhh.

Again, here's the test URL

[KNewbrough]

Re: Power Search Auto Complete

Hi Leslie,

It looks like the feature is actually working as designed from what I can see on the page. That final dropdown is the same one as when there are multiple options - it just attempts to redraw itself as the appropriate size to fit the contents with each keyup. The script will hide the dropdown under a few circumstances, but the final match being identical to what the user has typed isn't one of them because it's expecting the user to select one of the autocomplete options from the dropdown every time. It would be possible to add that functionality to the script, though.

[lesliekirk]

Re: Power Search Auto Complete

I guess I'm still confused because it doesn't behave this way on Bill's example. But I guess I'll have to live with it. The next question - how do I resolve the z-index issue. Depending upon the browser, the auto-complete list is behind content on the page.

[lesliekirk]

Re: Power Search Auto Complete

I guess I'm still confused because it doesn't behave this way on Bill's example. But I guess I'll have to live with it. The next question - how do I resolve the z-index issue. Depending upon the browser, the auto-complete list is behind content on the page.

Okay, crow tastes like crow. I was able to see that second form select I've been harping about on Bill's site.

If I can just figure out the z-index issue that is causing the dropdown menu to go behind the content on the page. I've tried applying it to the #topsuggestions div but that had no affect.

Leslie

[JFancett]

Re: Power Search Auto Complete

On your z-index issue, what happens when you change the z-index of the div to 999999 in Firebug or Chrome Inspect Element? Z-index issues are usually pretty straight forward.

[lesliekirk]

Re: Power Search Auto Complete

On your z-index issue, what happens when you change the z-index of the div to 999999 in Firebug or Chrome Inspect Element? Z-index issues are usually pretty straight forward.

I may have found the missing piece of the z-index puzzle - position! Doing some testing now and will report back.

[lesliekirk]

Re: Power Search Auto Complete

Seems that was indeed the missing piece. Here's what I used:

<style type="text/css">
#suggestions {
position: relative;
    z-index:9999;
}
#topsuggestions {
position: relative;
z-index:9999;
}
</style>

[lesliekirk]

Re: Power Search Auto Complete

Okay one more item (which I hope doesn't get lost in all of this) the current form field uses onBlur and onFocus to display the word Search in the box and to clear it when someone starts typing in the box.

<input type="text" name="Search" id="searchfield"        value="Search"onBlur="if(this.value=='')this.value='Search';"        onFocus="if(this.value='Search')this.value='';" />

The problem now is that after someone types their search phrase in, if you click the box it deletes what has been typed in. Can this be tweaked to only clear the word "Search"? Or is something else going on yet again?

I know Bill's example doesn't use this - his search box is a plain old-fashioned text field

[KNewbrough]

Re: Power Search Auto Complete

That's a pretty old school technique. You can remove the word Search from the field and that javascript, and just put placeholder="Search" on the input. That's an HTML5 attribute which will perform the same thing without ever affecting the input's actual value.

<input type="text" name="Search" id="searchfield"        value="" placeholder="Search" />

[lesliekirk]

Re: Power Search Auto Complete

Thank Kyle!!!

For the sake of continuity of this thread it would be

<input type="text" name="Search" id="searchinput"  value="" placeholder="Search" autocomplete="off" />

or

<input type="text" name="Search" id="searchfield"  value="" placeholder="Search" autocomplete="off" />

The autocomplete=off needs to be included for the Power Search Auto-Search.

Leslie

[aarcmedia]

Re: Power Search Auto Complete

Mine doesn't hide when the user clicks outside the search field. I can't seem to isolate how to have it do so. I'll play with it more later, but if someone has a quick snippet that causes it to hide the drop down once the form field is no longer active, that would be pretty dope.