Datalist - erro em palavras compostas

[FabianoSouza 5]

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;
	});
}

 

 

[FabianoSouza 5]

Resolvido.

No meu backend eu fiz um replace, substituindo os espaços existentes na string por " ".

Isso fez com que o datalist ignorasse o espaço entre as palavras, fazendo o "autocompletar" funcione perfeitamente.