Datalist - erro em palavras compostas

Montei uma estrutura para preencher um datalist associado a uma input text (para fazer a busca na datalist).

O problema é que quando se trata de palavras que tenham espaço na string, o "autocompletar" não funciona.

No caso é para selecionar cidades. Então se digitar Diadema, a datalsit funciona,  lista o nome da cidade e ao clicar nela, passa o valor para a input text.

Mas se escrever São Paulo, já não lê depois que pressiono a barra de espaço.

Já chequei o a string recebida, as cidades estão vindo completas. Mas ocorre algum erro na hora de criar os options.

Como resolvo?

Esse é o HTML

<input type="text" name="cidade" id="cidadeDigitada" list="cidades" placeholder="Sua cidade" autocomplete="off">
<datalist id="cidades"></datalist>

	 

	Tenho essa function que traz os dados em JSON do backend e preenche uma datalist. isso está funcionando perfeitamente.

function selCidades()

 var obj={url:'/backend/selecionar/'}
 , listCidades = document.querySelector('#cidades')
 , str=''
 , json=''
 , i='';
 server.ajax(obj, function(){
 json = server.res
 for (var i=0; i < json.length;++i){
	str += '<option id=' +json[i].id + ' value=' +json[i].titulo+'>'; // Guarda options em variável
	}
 listCidades.innerHTML = str;
	});
}