Passing href address on a datalist

Asked

Viewed 366 times

0

how do I redirect to "href" and not to "value"?

Follows the code.

<form>

<input list="categorias" type="text" placeholder="O que você procura?" >

<datalist id="categorias">

<option value=" ">	</option>
<option value="JOGOS"><a href="jogos.html"></a></option>
<option value=" ">	</option>
<option value="PS4"><a href="PS4.html"></a></option>
<option value="PS3"><a href="PS3.html"></a></option>
<option value="Xbox One"><a href="xboxone.html"></a></option>
<option value="Xbox 360"><a href="xboxone.html"></a></option>
              
<option value=" ">	</option>
<option value="Consoles"><a href="jogos.html"></a></option>
<option value=" ">	</option>
<option value="PS4"><a href="consolesps4.html"></a></option>
<option value="PS4 PRO"><a href="consolesps4pro.html"></a></option>
<option value="Xbox One"><a href="consolesxboxone.html"></a></option>
<option value="Xbox One X"><a href="consolesxboxonex.html"></a></option>

</datalist>

<input type="submit" id="categorias" value="Procurar"/>

</form>

html

1 answer

0


You can do as follows, as the event to delegate should be the input:

var href;
function myfunction(){
$('form').on('submit', function(e) {
  e.preventDefault();
  href = $('datalist option[value="' +$('input[list="categorias"]').val()+ '"]').find('a').prop('href');
  if(typeof href !== 'undefined')
    window.location.href = href;
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

<input list="categorias" type="text" oninput="myfunction()" placeholder="O que você procura?" >

<datalist id="categorias">

<option value=" ">	</option>
<option value="JOGOS"><a href="jogos.html"></a></option>
<option value=" ">	</option>
<option value="PS4"><a href="PS4.html"></a></option>
<option value="PS3"><a href="PS3.html"></a></option>
<option value="Xbox One"><a href="xboxone.html"></a></option>
<option value="Xbox 360"><a href="xboxone.html"></a></option>
              
<option value=" ">	</option>
<option value="Consoles"><a href="jogos.html"></a></option>
<option value=" ">	</option>
<option value="PS4"><a href="consolesps4.html"></a></option>
<option value="PS4 PRO"><a href="consolesps4pro.html"></a></option>
<option value="Xbox One"><a href="consolesxboxone.html"></a></option>
<option value="Xbox One X"><a href="consolesxboxonex.html"></a></option>

</datalist>

<input type="submit" id="categorias" value="Procurar"/>

</form>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.