[Résolu] Trying to format wpv-filter-search-box

[Auteur]

Publications

[timB]

I am trying to: format a search box (parametric search)

I visited this URL: https://toolset.com/forums/topic/attribute-for-searchbox/

I expected to see: Attributes for [wpv-filter-search-box] which enable customisations of its output

Instead, I got: No attributes still available.

I am trying to format a search box so it can be used with default text and without a button. It should just have a magnifying-glass search icon right-aligned and default text left aligned. (see attached)
Does anyone know how I can achieve that?

[Luo Yang]

Dear tim,

You can simply use HTML codes to replace the submit shortcode, for example:

<input type="text" name="wpv_post_search"  value="Submit" class="js-wpv-filter-trigger-delayed'/>

You can add other attribute into above HTML buttom, and use CSS codes custom it as what you want.

[timB]

Thanks for that Luoy

In this case, a parametric search view is being used to display a search form in a widget at the top of the page. I have managed to remove the button, and put the magnifying glass icon right-hand-side. I'm just not sure how to add the default text "Search Antibodies" in the left-hand-side of the box, which disappears the moment its clicked on and reappears if the box is left blank.

Following is the code which renders the form. This generates a search box in the header and tabulates the results. I do have a couple of queries about how to modify the display and functionality of this search method (it was created by my client's former web developer). The first query is about how to put default text in the search box: "Search Antibodies".

Once I have figured this, I would like to come back to you with the second query, which I think is rather more difficult: It is about how to display the results when the output list's *child* posts need to be included too, in a hidden yet expandable list under each parent.

Many Thanks
Tim

FILTER:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
[wpv-filter-search-box][wpv-filter-submit name="Antibody WI Search" hide="true" class="nobox"]
[/wpv-filter-controls]
[wpv-filter-end]

FILTER CSS:

.nobox{display:none!important;}
/*Important is needed to prevent the search button showing*/

LOOP OUTPUT:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
   <table width="100%" class="table table-striped table-condensed table-responsive">
            <thead><tr>
               <th>[wpv-heading name="post-link"]Product Name[/wpv-heading]</th>
               <th>[wpv-heading name="types-field-expectedspeciesreactivity"]Expected Species Reactivity[/wpv-heading]</th>
               <th>[wpv-heading name="types-field-applicationcodesclone"]Applications[/wpv-heading]</th>
               <!-- <th>[wpv-heading name="types-field-synonyms"]Other Names for Target[/wpv-heading]</th> -->
            </tr></thead>
      <tbody>
      <wpv-loop>
            <tr>
               <td>[wpv-post-link]</td>
               <td>[types field="expectedspeciesreactivity" output="raw" id=""][/types]</td>
               <td>[types field="applicationcodesclone" output="raw" id=""][/types]</td>
               <!--<td>[types field="synonyms" output="raw" id=""][/types]</td> -->
            </tr>
      </wpv-loop>
   </tbody>
   </table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No items found - if you have a suggestion for an antibody we should make recombinantly please email <a href="mailto:sales@aaa.com">sales@aaa.com</a> and we will look into it.</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

FILTER AND LOOP OUTPUT INTEGRATION:

The search below allows you to find our antibodies that are ready to order at an introductory price - please contact <a href="mailto:sales@aaa.com">sales@absoluteantibody.com</a> for bulk prices or to request we fast-track new antibodies, conjugates or fragments into the catalog.
<br>
<br
<br>
<br>
[wpv-filter-meta-html]
[wpv-layout-meta-html]

[Luo Yang]

Q1) I'm just not sure how to add the default text "Search Antibodies" in the left-hand-side of the box

I suggest you try with some custom JS codes, see similar thread here:
http://stackoverflow.com/questions/14069301/adding-default-search-text-to-search-box-html

Q2) It is about how to display the results when the output list's *child* posts need to be included too, in a hidden yet expandable list under each parent.
I suggest you try this:
1) create a nested view:
a) parent view list parent posts, display below child view
b) child view list child posts, filter with:
Post relationship – post is child of parent view
https://toolset.com/documentation/user-guides/querying-and-displaying-child-posts/
c) use Jquery UI "Accordion" to display the child view:
hidden link

Hope it help

[timB]

Thank you Luoy, for your help with this.
I haven't had a chance yet to implement your suggestion, but I am marking this thread as resolved because as always your solution seems sound.

I hope to get moving on it in the next week or two and will refer to your advice then.

Best wishes
Tim