As part of a web project, I use jQuery and javascript to build a query string for use by a user in a search tool. Since this is built on the fly by the user, I take the fields and values from the form, and then add them to the array, which is then translated into a search query in ui.
Before passing this string to the user interface, I would like to format the string based on keywords. (Example, if the keyword BETWEEN all caps) is used in the query, wrap the input fields following this keyword (there will be two) in parentheses. If the term CONTAINS is used, wrap the next field with an asterisk, etc. Inside JavaScript, there is a slice function that allows me to insert text by index inside an array. Since I'm looking for keywords in an array, not index values, there is another function or approach that would support this.
below is the code for creating / parsing input fields in a search query
//insert field after between option or remove it if it exists function insertFromField(param1, param2, param3) { if (param1 == "BETWEEN") { $("<input class='queryterm' type='text'name='fieldValue1' id='fieldvalue1' value='' size='15' /><span> TO </span>").insertAfter(param2); } if (param3 <= 2) { // do nothing } else { $(param2).next().remove(); $(param2).next().remove(); } } //build query string from Query Builder //TODO formatting on string return function setQueryString() { checkField(); var txt = $("input[name='tbsearchterm']"); var fields = $("#queryFields :input").serializeArray(); jQuery.each(fields, function (i, field) { if (txt) { txt.val(txt.val() + field.value + " "); } }); } //the UI contains an add button so the user can build their query at runtime for that i have the following: $('#add').click(function () { $("<div class='additionalrow'><select class='queryterm' name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select> "+ "<select class='queryterm' name='condition'>" + "<option value='address:'>Address</option>" + "<option value='age:'>Age</option>" + ... edited for Brevity "</select> <select name='operator'class='operClass'><option id='opt1'>Equals</option><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select> <input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' /> <a href='#' id='btnRemove'><span class='advButtons'>Remove</span></a></div>").appendTo('#queryFields'); });
Thank you in advance
Update comments. Thank you for the answer for further clarification: 1. I hope to achieve this, preferably using jQuery, but I am not against using javascript if jQuery does not contain functions that support this.
2 and 3. It always contains one value. Where there will always be two. The insertFromField function is called when the selection changes in the selector drop-down menu.
The full working sample can be seen here jsFiddle
When you change the second selector, you will see the added additional input field. This is called by the insertFromField function. This basically evaluates the entire div element and counts the number of input fields and adds or removes them accordingly.
I also added code to view the result in the user interface.
The expected output would be when the word BETWEEN is used to place brackets around the values of the last two input fields, so it would look something like this: And address 123 is the main street BETWEEN (17 18)
Sorry for not thinking about the script before