jquery autocomplete - Render Item contains space Issue

jquery autocomplete - Render Item contains space Issue

Hi All,

I am using below jquery autocomplete plugin




I have around 3 autocomplete functionality in a page. Every works perfectly except of items which returns spaces like words( "abc def");Please see below.

The json response I get is

  1. [{"colcity":"Pilot Mountain","colpostalcode":null,"colcountry":"US","colstate":"NC","colcounty":"Surry"}]

I am rendering that response in json with 

  1.  }).data('ui-autocomplete')._renderItem = function (ul, item) {
  2.             return $('<li></li>')
  3.                     .data('item.autocomplete', item)
  4.                     //   .append(item.label + item.value + item.country)
  5.                     .append("<li><a href=\"index.jsp\" class=\"cities\" data-country=" + item.country + " data-state=" + item.value + "  data-county=" + item.county + " data-zipcode=" + item.postalcode + " data-city=" + item.label + " data-value=" + item.label + ">" + item.label + "</a>").appendTo(ul);
  6.         };
It gets rendered as



Can someone take a look and let me know as what is wrong here?

if you look at the Pilot Mountain , Dom is rendered incorrectly and data-city attribute is messed up ? I am not sure as how to fix this ?