Passing href address on a datalist



  • how do I get redirected to the "href" and not to the "value"?

    Follow 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>



  • You can do the following, the way the event delegates should be https://developer.mozilla.org/en-US/docs/Web/Events/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>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2