[Gelöst] Search not returning results after changing search button to fa-search icon

[Author]

Artikel

[davidm-13]

Hi,
I have this view shortcode:

      [wpv-form-view name="complaints-plant-search" target_id="42584"]

Which was returning result to the target_id page.
I changed this code in "complaints-plant-search":

[wpv-filter-controls]
<div class="form-group">
	<label for="wpv-post-search" class="label-right">[wpml-string context="wpv-views"]Medical Complaint / Use[/wpml-string]</label>
	[wpv-filter-search-box output="bootstrap"]
    [wpv-filter-submit name="Search"]
</div>
[/wpv-filter-controls]

To this:

[/wpv-filter-controls]
<div class="search4complaint">
	<label for="wpv-post-search" class="label-right">[wpml-string context="wpv-views"]Medical Complaint / Use[/wpml-string]</label>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Enter medical omplaint">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">
        <i class="fa fa-search"></i>
      </button>
    </div>     
    </div>
  </div>
[/wpv-filter-controls]

Now the search is not returning any results or any errors - what do I need to get the search working again?

Thanks

[Christian Cox]

Hello, you'll need to at least add the input name attribute wpv_post_search to your custom text input field like so:

<input type="text" class="form-control" placeholder="Enter medical omplaint" name="wpv_post_search">

Without that name, URL parameters required for search will not be passed to the target page.

If you want the searched term to appear in the text input field value by default, you can use the views shortcode wpv-search-term in the value attribute as well, like so:

<input type="text" class="form-control" placeholder="Enter medical omplaint" name="wpv_post_search" value="[wpv-search-term param='wpv_post_search']">

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-search-term

[davidm-13]

Hi Christian, Thanks for this.
Your code works fine, but there appears to be another problem, if I click on the fa-search icon there's no response, but clicking in the "Enter medical complaint" area (after entering search term) works as required.
Any idea how I can get the same result clicking the icon?
Thanks

[Christian Cox]

Since this is a custom UI that doesn't use the standard Views inputs shortcodes, I don't have a cut-and-paste solution for you. You'll need some custom JavaScript to trigger the form submission event when the button is clicked. You can use jQuery in the 'jQuery' namespace, instead of the '$' namespace:

jQuery(document).ready(function(){
  // add your code here using the jQuery namespace instead of $
});

If the icon click event triggers a form submission event, it might work. Similar example:
https://www.tutorialrepublic.com/faq/how-to-submit-a-form-using-jquery.php

[davidm-13]

My issue is resolved now. Thank you!