How do I add more fields when searching? - javascript

I have this functionality to search the product. However, I could only search the name of the product.
Problem: How can I implement a search where it will allow me to search either the product name, size, or category?
For now, I was able to search and display the products according to what product name was entered in the search field.
For example:
it will show all of the products with a category of ML upon entering in the search field.
It will show all of the products with a size of M upon entering mor M in the search field.

PS- I don't have enough reputation to add comments
approach 1-
You can add multiple fields for the filter. A dropdown for sizes and one for the search field for the category.
approach 2-
add a dropdown from which users can select what type of filter they want, and then the search field will work according to that.

Related

Always search 'all orders' and reset filters when using search field in WooCommerce orders admin

I'm trying to always reset selected filters in WooCommerce order backend list. By default filters and the search field are combined during search. I got a few filters added by the 'Custom Order Fields' plugin. Anyhow I need them to be reset when using the search field for terms.
I recognized a hidden field with name="_wp_http_referer" that included the former selected filters etc. My attempt was to reset that value to '/wp-admin/edit.php?post_type=shop_order' but did not really work. I can see the value is overridden with my JS but when hitting submit of the search field all the filter criteria are still in the URL.
Since the markup of these filters aren't regular HTML select elements I could not change their value, so my concept was to redirect to something like /wp-admin/edit.php?post_type=shop_order when using the search field and adding the search parameter of the search. That did not work as well.
I could not find a hook to customize the post-search-input field action. Any hint is much appreciated. Is it even possible to bypass the former select filters when using the search field within woo orders list? Any advice if that concept makes sense?

How can i make search bar within Shopify store?

I am working on a search bar in the header. The search bar has 2 input fields, and to search through the products requires both values to be inputted (eg user is looking for a battery with 12volts and 10 amp/h).
The first input field (volts) will have a dropdown for the volts which will only have 4 different values to choose from. These values are already set within the metadata and when the user clicks inside the input field this dropdown will show up straight away with the 4 values to choose from.
The second input field however (amp/h), has a dropdown with about 30 values to choose from. I want this dropdown to be hidden until the user begins to type which value they are specifically searching for, then the dropdown will be visible with a reduced amount to choose from.
I have coded the first input field (volts), i just don't know how i can get the second one to be the way I have described above. I also am unsure how to make it actually search through the products based on the values the user inserts into input field based on what they click from dropdowns, but this can be sorted at a later date once functionality is sorted.
Any help will be greatly appreciated!

Pull a variable and category from a forms option select and post it to a hidden input

I am trying to pass to variable from a form select but I am running into issues.
How do I accomplish sending the catSubcat, value, and more variables. I have tried so many different things.
Update: I have created the jsfiddle below. I kinda have to be vague due to security here.
With the example html you will see category (DA, DC, etc..), multi acct code(M02 or M03 based on the amount), multi name (Bundle). For testing the clients can make up the inputs to do their testing. Once I receive the code from the other department I have to hide all the inputs except the products, but they will populate into a hidden field.
How it is supposed to work: A user goes to the account page and selects however many and whatever account. Based on their selections the category, multi code and multi name will be passed through the submit to another page and submit all the variables.
Not my code and I cannot change it due to the other departments requirements.
<https://jsfiddle.net/jm1w6ycv/2/>

typeahead.js limit autofill to items in dataset

I have a Typeahead.js project working, I am able to search. Within this I am pre-filling a second input (using an ID column).
I need a way to detect if the user goes back and alters the filled information but does not choose an item from the typeahead list so that I can clear this hidden field.
Example:
User types "project 1"
"My Project 1" is displayed as a suggestion and user selects suggestion.
Hidden field is set to ID of this item (1)
User returns to field, and types in "something else"
user does not select any suggestions presented
Currently there is no trigger supplied by Typeahead.js that presents me with the second scenario. Is there another way to detect this?

AJAX auto-suggest combo box

I’m looking for an AJAX-enabled combo box with the following features:
The combo box accepts entries selected from a drop-down as well as free-form text entered by the user (kind of like the text field used to enter tags for StackOverflow questions)
The drop-down list contains a limited number (less than 10) of suggestions based on what the user typed so far
The suggestions are pulled from a primary list and a secondary list. The secondary list is consulted if the user’s input cannot be matched to anything in the primary list. Both lists are generated on demand by my application running on the server.
Any suggestions?
jQuery-ui has an autocomplete plugin that offers this functionality.

Categories