Multiple search options, single field, selected via drop down - js/jquery - javascript

I'm trying to essentially create a drop down menu tied to a field that allows me to search multiple sections of the back end of a site by choosing which section to search using the drop down.
What this will entail is assigning a variable to represent the input from the form and scripting to toggle between the different query strings that that variable will be used to complete.
At this point I'm basically just lost as to how to structure the javascript required to accomplish this.
Can I tie each query string to each option using an id and then create a function that runs when the form itself is submitted, constructing the needed query URL by combining the variable with the base URL included in the javascript?
Basically I need, say, the text dropdown selection to tell the page that it will be appending %query% to http://example.com/content/text/?q= when the form is submitted and letting the system handle the rest.
I would sincerely appreciate some input on how to structure the js/jquery to accomplish that. I know I need to tie the variable to the field and the URLs to be completed to the drop down based on ID but I'm not totally sure how.

Here are some jsFiddle examples of what you might want to do:
Pass the search term and dropdown select field in the query string to one page and have the page do something based on the choices. jsFiddle
Pass the search term to a page specified by the dropdown select field. jsFiddle
Pass the search term to a URL specified by the dropdown select field. jsFiddle

This is what I would do.
Have a eventhandler for onsubmit
In YourMehtod(){
1. get dropdown selection
2. get the URL and append query string
3.window.open(url,"_self")
}

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?

Multiple Key Value Query Search Input Box

I'm not quite sure exactly what to search for or where exactly to start, but I'm trying to see if it's possible to have a customized search box for multiple GET queries simply using jQuery, JS, HTML and CSS.
The user would first type in something which will prompt the red box to show (key) and it would autofill with a listed default given the first few characters they typed. Then upon pressing enter or tab, they would be allowed to fill in the answer gray box (value). Then after, they can either choose to submit or put in another key / value.
Is there a jQuery library that already has this implemented, and is this even possible? I thought about putting input boxes inside the input search box and using jQuery to hide and show them depending on what they type, but is that the best way?
I'd like to do this without comprehensive framework / library like Angular and React.
Thanks in advance!
You must handle it with one of JavaScript freamworks like Vue.js, React.js or Angular.js

Selecting more than one value without checkboxes

Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.

jsf form. lookup up primary key in popup form to be entered in parent form

I have a Java EE JSF/Primeface app with an entry form for adding/editing an entity. Let's call it Product On that form is a field to specify the Salesperson, which would really be the Salesperson's Employee Number. But most data entry users don't know the salespersons employee number off the top of their head.
I'm looking for a way to either click open a popup window where the user can put in a keyword or two, find the right B.Smith, J.Doe, etc..., click their name and have that appropriate employee number pop into the text box on the parent form.
Or somehow do this inline in the parent form where the user starts typing any keyword and ajax queries the employee database, appropriate salesperson is selected and the employee number replaces the keywords typed in the input text box.
A nicety is to have (in an non-editable state) next to the text inputbox with the employee number, the salesperson's full name corresponding to the employee number.
Or some variant of those.
I had this working in a JSP application using some hacked together javascript, but I'm having trouble porting the functionality to JSF/Primefaces and was wondering if this functionality is already available in either technology. I've been searching for a solution for a while.
One of the biggest issues if I continue to use my old javascript is knowing the the parent forms textbox id to know where to pop the value in. Using JSF form I'm getting things like j_idt28:j_idt29
You should not need to mess around with Javascript for that case, so you won't need to know the generated ids.
Since you use PrimeFaces, you may want to look into the Autocomplete component.
Besides that, you can always make use of the f:ajax tag to respond to user input and update fields according to it for example.

Select control search on the basis of data fields

Currently I am using Jquery Chosen Plugin in order to search the values written inside a search box and it works very well in case I want to search on the basis of the text written inside the option tag. i.e. as shown in the figure:
But what I want to achieve is search on the multiple basis i.e. on the basis of the text written inside the option tag as well as the data attributes of the option tag i.e.
For example in the above figure I may be able to search Debitors either by typing Debitors directly or by typing the data-phone's value i.e.0321-111111. I've searched the chosen plugin's documentation for the possibility to search on the basis of multiple values but, as much as I know, there wasn't any functionality provided by it.
Now what I'd like to ask is, Is there any jQuery plugin providing this multisearch functionality that you may know of?
Thanks.
Finally, I found Select2 Jquery plugin that allows the custom matcher for the searching. i.e. You can define whatever you want plugin's search to search.

Categories