[FIXED] How to remove surrounding spaces in a comma delimited string in jQuery QueryBuilder plugin

Issue

I am using jQuery QueryBuilder plugin. I have in operator with an input text. Users can type one value or a comma delimited string.

I used value_separator: ',' but it's taking the whole value with the surrounding spaces as you see below. The expected result should be name IN ('Alex','Anne','Marie')

I tried to use the valueSetter function as below :

    valueSetter: function(rule, value) { 
    rule.$el.find('.rule-value-container input').value = 
    rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim()) ; }

So I check the current input value and then split it by comma and trim each item then return the new value but it's not working.

Any suggestion please what I am doing wrong ? Thank you.

$(document).ready(function() { 

$('#queryBuilder').queryBuilder({
    filters: [ 
     { id: 'name',
    label: 'Name',
    type: 'string',
    value_separator: ',',
    operators: ['in'],
    //this value setter to get current input value, split it by comma if it has and return with item trimmed
    valueSetter: function(rule, value) { 
    rule.$el.find('.rule-value-container input').val() = 
    rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim()) ; }
    }
    ]
 });   
 
$('#sql').on('click', function() { 
var filter = $('#queryBuilder').queryBuilder('getSQL', false);
console.log(filter.sql);
 });
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>

<div id="queryBuilder"></div>
<button type="submit" id="sql" class="btn btn-primary btn-outline btn-rounded center-block">SQL</button>

Solution

You can use valueGetter instead of valueSetter:

        valueGetter: function(rule) {
          return rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim());
        },

$(document).ready(function() { 

$('#queryBuilder').queryBuilder({
    filters: [ 
     { id: 'name',
    label: 'Name',
    type: 'string',
    valueGetter: function(rule) {
      return rule.$el.find('.rule-value-container input').val().split(",").map((item)=>item.trim());
    },
    value_separator: ',',
    operators: ['in'] }
    ]
 });   
 
$('#sql').on('click', function() { 
var filter = $('#queryBuilder').queryBuilder('getSQL', false);
console.log(filter.sql);
 });
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>

<div id="queryBuilder"></div>
<button type="submit" id="sql" class="btn btn-primary btn-outline btn-rounded center-block">SQL</button>

Answered By - Anthony Garcia-Labiad

Answer Checked By - Willingham (PHPFixing Volunteer)