Comma-Separated string

Question

I have a text input that gets updated every time a user selects a new tag (a new creates a new list element) and these list elements are mapped into a comma separated list that is then added to the value a text input.

The value of the text input may look like this,

PHP, C#, C, C++

A user can click on a tag to remove it from text input, however I cannot see to remove it from the comma seperated list in the input field.

My code looks like this for the tag deletion method.

var array = $("#job_tags_input").val().split(",");

I though this would give an array of the values in my input but all I get in my console hwen I do my console.log(array) is,

["C", " PHP", " Perl", " C#", " "]

If the tag for "C" was deleted how would I remove that from my input field?

MY JS

if($("#job_tags").get(0)) {
    $("#job_tags").tagHandler({
        assignedTags: [ 'C', 'Perl', 'PHP' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true,
        onAdd: function(tag) { 
            var s = $("#job_tags li").map(function(){
                return $(this).text();
            }).get().join(",");
            s = s.substring(0, s.length - 1);
            console.log(s);
            $('#job_tags_input').val(s);
        },
        onDelete: function(tag) { 
            /*$("#job_tags_input").val( $("#job_tags li").map(function(){
                return $(this).text();
            }).get().join(", "));*/
            var array = $("#job_tags_input").val().split(",");
            array = $.grep(array, function(value, i) {
                return ( value.indexOf(tag) == 0 );
            });
            array = array.join(",");
            console.log(array);
            $('#job_tags_input').val(array);
        }

    });
}

If your input has been updated to contain PHP,Perl,C# your output array should not be what you showed. There's some missing code for us to look at here. `"PHP, C#, C, C++".split(',')` outputs `["PHP", " C#", " C", " C++"]` — Ruan Mendes, Feb 28 '12 at 22:17
That looks like an Array logged to the console. What were you expecting? — gilly3, Feb 28 '12 at 22:20

score 0 · Accepted Answer · answered Feb 28 '12 at 22:18

0

You can splice the item first:

array.splice(array.indexOf("C"), 1); // remove one item at the position of "C"

Then join the elements together and update the textbox:

$("#job_tags_input").val(array.join()); // uses "," by default

However, you'd be better off splitting on ", " since the space is part of the delimiter.

answered Feb 28 '12 at 22:18

pimvdb

151,816
78
307
352

Beware `indexOf` is not supported in all browser. – Selvakumar Arumugam Feb 28 '12 at 22:20
And by all browsers he means IE8 and lower. FWIW, I would delete the tag from the input string and always create the array from that. `String.indexOf` is supported by all browsers. – pseudosavant Feb 28 '12 at 22:39
@pseudosavant how would I go about doing that? – Udders Feb 28 '12 at 22:40
1

It depends on how you are choosing to allow users to remove the tags. How are you doing that? – pseudosavant Feb 28 '12 at 22:54
A user removes a tag by click on the `
` that contains that value of the tag, I have updated my question with the javascript I am currently using

Udders

Feb 28 '12 at 22:57

score 0 · Answer 2 · answered Feb 28 '12 at 22:44

0

If you are using jQuery there are several methods will help. You can split() without the space and use $.trim() to clean whitespace as a space may or may not always exist.

$.grep() can be used to filter an array and return new array.

answered Feb 28 '12 at 22:44

charlietfl

170,828
13
121
150

here's a fiddle that uses selects to add/remove. Never parses the text field at all and just bounces the values between "assigned" and "available" arrays. http://jsfiddle.net/4pvhS/ – charlietfl Feb 29 '12 at 00:02

score 0 · Answer 3 · answered Feb 28 '12 at 23:10

Try below code to check the indexOf removed tag and then splice it from the list. Then set the value of the input by joining the spliced list.

DEMO

var curSelection = $('#job_tags_input').val().split(",");
var elIndex = curSelection.indexOf(t);

if (elIndex >= 0) {
    curSelection.splice(elIndex , 1);
    $('#job_tags_input').val(curSelection.join());
}

$('#job_tags_input').val(curSelection.join());

Below function is for Array.indexOf,

//Below code is from http://stackoverflow.com/a/144172/297641
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function (obj, fromIndex) {
    if (fromIndex == null) {
        fromIndex = 0;
    } else if (fromIndex < 0) {
        fromIndex = Math.max(0, this.length + fromIndex);
    }
    for (var i = fromIndex, j = this.length; i < j; i++) {
        if (this[i] === obj)
            return i;
    }
    return -1;
  };
}

Comma-Separated string

3 Answers3