Retorno em função seletora

[LuccasCardial 0]

Salve amigos!

Mais sedo o Hugo me deu uma grande ajuda em uma função para acessar propriedades da minha tag "<option>" em uma datalist.

Assim eu poderia retornar os valores das propriedades como "nome", "uf", "cidade" etc:

<input list="meu-exemplo" class="auto-completar">
<datalist id="meu-exemplo">
 <option value="Lucas Cardial" uf="TO" cidade="Palmas">
 <option value="Luciano Afonso" uf="SP" cidade="Guarulhos">
 <option value="Luciana Pereira" uf="BA" cidade="Salvador">
</datalist> 

Pois bem, afim de usar o código X vezes, inseri o script em uma função que chamo de "SelectAttr", e passaria por parâmetro qual atributo eu quero retornar:

var UF = SelectAttr('uf');
var Cidade = SelectAttr('cidade');

function SelectAttr(selector){

	$("input[list]").on('change', function(event){
			var selected = $(this).val(),
				option = $('#'+$(this).attr('list')+' option')
					.filter(function(){
						return this.value == selected;
					}),
					value = $(option).val(),
					attr = $(option).attr(selector);
                                        return attr
					
	});
}

Vejam que na linha 11 eu tento retornar o valor da variável attr, mas não consigo por ela estar "uma camada abaixo" da função. Então tentei desta forma:

function SelectAttr(selector){

	return $("input[list]").on('change', function(event){
			var selected = $(this).val(),
				option = $('#'+$(this).attr('list')+' option')
					.filter(function(){
						return this.value == selected;
					}),
					value = $(option).val(),
					attr = $(option).attr(selector);
					return attr
	});
}

Mas o resultado disto quando chamo a função SelectAttr('nome'); é a´penas "[object]"

[Sergio Tomas 16]

Olá Lucas, o problema é que você está retornando um objeto e não uma string.

 

se a função SelectAttr(selector) está sendo chamada você não precisa retornar um evento change como você fez na linha 3 basta você fazer assim:

function SelectAttr(selector, atribute){
 
	var selected = $(selector).val(),
		option = $('#'+$(selector).attr('list')+' option')
		.filter(function(){
		return this.value == selected;
	}),
	value = $(option).val(),
	atribute = $(option).attr(atribute); //n use paravra reservadas da linguarem para variavel por isso troquei attr por atribute
	return atribute;
}

Eu resolvi passar dois parametros nesta função para que um você selecioneo que você quer mudar e outro você adicione o attr que deseja.

[LuccasCardial 0]

Olá Sério, obrigado pelo apoio.

Mas eu não quero mudar um atributo, eu preciso resgatar este atributo ao selecionar o valor que desejo.

Da forma como você me mostrou, eu não consigo ter o controle do evento.

O script funciona, se eu por exemplo, dar um alert na var "attr", me é exibido o valor que está na propriedade uid

da minha listoption.

Eu quero apenas dar o retorno deste valor =/

function SelectMap(selector){

	$("input[list]").on('change', function(event){
			var selected = $(this).val(),
				option = $('#'+$(this).attr('list')+' option')
					.filter(function(){
						return this.value == selected;
					}),
					value = $(option).val(),
					attr = $(option).attr(selector);
					alert(attr);
	});
}

[Sergio Tomas 16]

Olá Lucas, pode contar comigo.

 

Eu recomendo você a tirar o evento da função, você pode fazer desta forma:

$("input[list]").on('change', function(event){
			var selected = $(this).val(),
				option = $('#'+$(this).attr('list')+' option')
					.filter(function(){
						return this.value == selected;
					}),
					value = $(option).val(),
					attr = $(option).attr(selector);
					SelectMap(attr)
	});

function SelectMap(selector){
	alert(selector);
        return selector;
}

Explicando: Quando você tira o evento da função você vai evitar duplicidade de eventos que iria acontecer quando funciona-se tipo ele poderia começar a dar uns 3 alertas quando você clica-se uma vez dentro do evento eu chamo a função para me dar este retorno com o atributo que eu quero, ficou claro? éra isso mesmo?

[LuccasCardial 0]

Reanalisei tudo, e cheguei a conclusão de que eu só iria acessar esta função quando o usuário mudar o foco do input. Então refiz algumas coisas e agora tudo está funcionando perfeitamente.

Todavia obrigado pelo apoio.