Autocomplete widget (jQuery UI) - why the line breaks?

Question

I'm having some issues with the autocomplete widget. When you choose an option, the item value is prefixed with a line break and some whitespace. Here's how the result shows up:

Object { label="\n                     bedroom", value="\n                    bedroom"}

I donno why that is happening, maybe it's the way I'm setting up the array to get the values from? Here's my code:

$("#step2").show(0, function() {
                /*tags auto-complete*/        
                var tags = $('span', $('#liTags')).text();
                var availableTags = tags.split(' ;');
                $(".liTagInput").autocomplete({ 
                    minLength: 2,
                    source: availableTags,
                    select: function(event, ui) {
                        var value = ui.item;
                        console.log(value);
                        console.log(jQuery.inArray(value, availableTags));
                        if(jQuery.inArray(value, availableTags) >= 0) 
                            $(this).val('');
                    } 
                });

            });

In case you are wondering what I'm trying to do here (which I haven't tested yet because of the line breaks), I'm getting the tags from a span element on the HTML side, then splitting those into an array (availableTags).

Then what I want to happen is that once a user types something into the text box, if it is not something he/she chose from the auto-complete menu, then the value of the text field should be cleared out (I might also show them a warning telling them to choose from the menu but let's leave that for now).

Any thoughts?

Answer 1

Why don't use

string.replace(/\s/g, "");

to remove whitespaces using replace() method.

And to remove all line breaks use

string.replace(/(\r\n|\n|\r)/gm,"");

---

Here you go: http://jsfiddle.net/tjfmp/