Ir para conteúdo
FabianoSouza

Datalist - erro em palavras compostas

Recommended Posts

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

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Resolvido.

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

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por FabianoSouza
      Comecei a usar datalist hoje.
       
      Duas coisas que ainda não entendi:
      1) Como faz para definir function para o evento click ou evento change da datalist?
      2) Como faço para pegar o valor do option clicado da datalist?
       
      Os options da tag datalist não são como options da tag select?? Que  permite definir um valor para "value" e outro para para  exibição ao usuário?
      Help!
    • Por polocal
      Oi galera, eu to com um "pequeno" probleminha...
      Eu quero um select que quando você vai digitando ele vai procurando e preenchendo sozinho
      Exemplo:

      Mas ele fica assim:


      Ele mostra a ID do usuario, e não o nome do usuario para me fazer a consulta
      Eu tenho o seguinte código:

      <input list="usuarios" name="usuarios">
      <datalist id="usuarios"> <option value="">SELECIONE</option>
      <?php $sql = mysql_query("SELECT * FROM clientes ORDER BY nome ASC") or die(mysql_error()); while($d = mysql_fetch_assoc($sql)) { echo "<option value=\"{$d['id']}\""; { } echo ">{$d['nome']}</option>"; }
      ?></datalist>
      E por assim vai, ate completar todos os cliente do meu sistema
      So que tem um problema... quando executa esse codigo, ele mostra mostra a id do usuário como ta la em cima, eu achei um codigo que é: data-value="151", So que esse data-value, nao manda o id para o form e depois enviá-lo para o banco de dados
      Alguém pode me da uma luz? não consegui explica muito do que estou precisando mas caso tiver com duvida pergunta ai em baixo
      *ADM= SE EU TIVER COLOCADO O POST EM UM LUGAR ERRADO MOVE PARA MIM PF? PQ EU NÃO SEI ONDE ISSO SE ENCAIXA*
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.