Replacing homepage search with SearchWP live ajax search

I’m not sure exactly what your issue is. Are you saying the widget is occurring in the wrong order, such that it’s before the element you want it under?

Or is the order OK but it shows up on the page in the wrong position?

Ideally you want elements to occur in the same order as you would like them to appear, but if that’s not possible, CSS offers several options. For flex elements, you can reorder elements with the order CSS property.

For relative and absolute elements, you can move them around on the page with top, bottom, right, left properties. Negative distances are allowed, so you have full control of where elements appear.

The concept gets confused when responsive layouts are necessary. Ideally the elements will flow into the right position as the browser width changes without additional styling, but you can use media queries to apply specific CSS for various common screen widths.

If you can link to a page that contains the elements you want, even if in the wrong place, and describe what you want moved where, someone here should be able to suggest appropriate CSS.

Thanks for getting back.

The main issue I have is that I want to give my visitors a choise to search by location(on top) or by company name(bottom). Now, the top dropdown search works great, no issue there. For the bottom one what I want is to take my visitors straight to the listing page they typed in and not to the search results. I know this can be achieved with SearchWP Live Ajax Search plugin, but somehow it doesn’t work together with FacetWP autocomplete, at least for me.

This plugin however, works well as a separate widget placed on homepage, but whenever I put it there it goes beneath the main search section of the homepage.

Take a look at the link. What I want is to either integrate it with facetWP autocomplete or what might be easier hook it in the position of facetWP. Thanks.

Thanks for the explanation. As I mentioned, it should be possible to move the AJAX search widget around on the page with appropriate CSS. In order for us to suggest what CSS to use, we need a live page that contains the widget. However, it’s possible the widget appears under the main search because its code hooks into the search form output, meaning moving the AJAX widget might also move the main search form. It may be difficult to separate the two with CSS. There’s still a possibility, but we can’t know without seeing it on a live page.

BTW, I saw your other post in this forum about changing the contractor search behaviour, but since I couldn’t offer a reasonable solution, I didn’t reply, hoping someone more knowledgeable might reply. Once a post has a reply, the number of people viewing a thread drops off because it appears the person is being helped. I didn’t think my reply would be that helpful.

Since no one has replied, maybe any input is better than none. Both search forms basically go through the same process. The only difference is the data type submitted. In order to change the behaviour of one, you would need to separate it out into a separate custom coded process that redirects to the contractor’s page determined through an AJAX request. I don’t know how adept you are at custom coding. It’s nothing that exotic, but it’s not for beginners either.

If this is beyond your abilities, you could hire an experienced coder for help. I’m not offering help for pay, but you can find help at jobs.wordpress.net.

That said, I imagine you’re thinking the Live AJAX solution is looking much more desirable if you could just get it positioned correctly. As I said, we’d need the widget placed on a live page in order to suggest the CSS needed to properly position it.

Im gonna turn that widget on for you and hopefully you will be able to position it where I want it to be, just to note, I know how to do it with simple css i.e. position: absolute will do the trick, but I am not happy with this solution cause I need the site to be responsive. Well, there is probably a walkaround for this too, anyways, check the site in few seconds and the widget will be on again.

The widget is now live. Looking forward for any solutions you might have for me. Thanks.

It looks like we’re playing with the CSS at the same time, the rules changed on reload. Position relative is better for responsive positioning. If you use a percentage for the element width, use percentage for left. width: 40%; left: 30%;
If you use a fixed width, use the calc function. width: 300px; left: calc(50% - 150px);
The left positioning will then be responsive. The vertical positioning changes due to media queries. You’ll need to identify the responsible media query and adjust the top positioning within the media query.

Yes, I tried to finish that off myself after your suggestions. All went well. Thanks very much for your help bcworkz.