CODEWITHSUNDEEP
javascripthtml
jedu
jedu

Reputation: 1341

How to set default value in input datalist and still have the drop down?

I am using the datalist HTML property to get a drop down inout box:

<input list="orderTypes" value="Book">
<datalist id="orderTypes">
  <option value="Book">
  <option value="Copy">
  <option value="Page">
</datalist>

The problem is that now I have to clear the input box to view all the drop down values. Is there a way to have a default value but still view all the values in the datalist when the drop down icon is clicked?

Upvotes: 3

Views: 24680

Answers (10)

Ro Yo Mi
Ro Yo Mi

Reputation: 15000

If you're willing accept an empty string when the user does not change the value, then you could do this with CSS.

HTML

<input list="DeathStarPlans" name="Target">
<datalist id="DeathStarPlans">
    <option value="Bridge">
    <option value="Exhaust Port" selected>
    <option value="Trench">
    <option value="Brig">
    <option value="Shuttle Bay">
    </datalist>

CSS

::placeholder {
    color: black;
    }

In your POST route on the server you'd need to handle an empty value and assume the value wasn't changed.

Upvotes: 0

Fatih YILDIZ
Fatih YILDIZ

Reputation: 1

Try this:

<form action="index.html" method="get">
            <label for="browser">Choose your browser from the list:</label>
            <input list="browsers" name="browser" id="browser" placeholder="Select an option">
            <datalist id="browsers">
                <option value="Edge">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
            </datalist>
            <input type="submit">
        </form>

Upvotes: 0

caballero de libra
caballero de libra

Reputation: 1

//In case anyone finds it helpful (using jquery):
 <input type="text" list="listmiscomis" id="pon"/>
        <datalist id="listmiscomis">
            <option value="uno">uno</option>
            <option value="dos">dos</option>
            <option value="tres">tres</option>
            <option value="cuatro">cuatro</option>
            <option value="cinco">cinco</option>
        </datalist>   
//mark option
  $('#pon').val("dos");    
//having the focus passes the value to the place holder
$("#pon").on("focus",function(){
        if($('#pon').val() !== ""){
        let cont = $('#pon').val();
        $('#pon').attr("placeholder",cont);
        $('#pon').val("");
}
})    
//when it loses focus and if no option was selected it passes the place holder as value
$("#pon").blur(function(){
        if($('#pon').val() == ""){
        let valor = $('#pon').attr("placeholder");
        $('#pon').val(valor);
        $('#pon').removeAttr("placeholder");
    }
})
remove focus when selecting option
$(document).ready(function(){
    $("#pon").change(function(){
        $("#pon").blur();
    });
});

Upvotes: 0

Louis
Louis

Reputation: 21

If this helps at all:

$('#grouptext').val($('#grouplist option#48').attr('value'));

where '#grouptext' is your text input to which your datalist '#grouplist' is attached, and #48 is the ID you're looking to "pre-select".

here's what my data list looks like, for clarity here's what my data list looks like, for clarity...

worked for me.

In Chrome's console it shows up like this with "option#115", which corresponds to the correct text in the datalist for that "id" (being 115)

enter image description here

Upvotes: 0

Ricardo
Ricardo

Reputation: 1

set id for your input and with js set default value

<script>
    setTimeout(() => {
        document.getElementById('orderTypes').value = "Book";
    }, 100);
</script>

Upvotes: -1

lendoo
lendoo

Reputation: 553

I have the same problem. I just simple added placeholder with the default data. In your example:

<input list="orderTypes" name="orderType" id="orderType" placeholder="Book" />

I listen submit event. If the input value is empty, I use Book as default value, otherwise I use the given value...

$("#mySubmitButton").click(() => {
    // use event prevent here if need...
    const orderType = $("#orderType").val() || "Book";
    console.log(orderType);
});

Upvotes: 7

Adam Chojaczyk
Adam Chojaczyk

Reputation: 1

I've menaged to get what You described with just <select> + <option> tags instead of <input> + <datalist>:

<select name="sortBY">

  <option value="Book">Book</option>
  <option value="Copy">Copy</option>
  <option value="Page">Page</option>
</select>

Putting it all inside <form></form> tags will send it eg. with POST method with $_POST['sortBY'] value.

Upvotes: 0

GalAbra
GalAbra

Reputation: 5148

I would use input's placeholder attribute along with a Javascript code that'll make sure that the field isn't empty upon submission.

Obviously this is just an example, you'll have to modify the submission event.

document.getElementById('submitButton').addEventListener('click', function() {
  let inputElement = document.getElementById('myInput');
  if (!inputElement.value) {
    inputElement.value = 'Book';
  }
});
<input id="myInput" list="orderTypes" placeholder="Book">
<datalist id="orderTypes">
  <option value="Book">
  <option value="Copy">
  <option value="Page">
</datalist>
<input id="submitButton" type="submit">

Upvotes: 0

Shawn
Shawn

Reputation: 3159

I know of no way to do this natively. You could make a "helper" div to use when the input field has value. I couldn't hide the native drop down so I renamed the ID. Uses jQuery.

html

<input list="orderTypes" id="dlInput">
<div id="helper" style="display:none;position:absolute;z-index:200;border:1pt solid #ccc;"></div>
<datalist id="orderTypes" style="z-index:100;">
   <option value="Book">
   <option value="Copy">    
   <option value="Page">
</datalist>

script

$(function(){
    // make a copy of datalist 
    var dl="";
    $("#orderTypes option").each(function(){
            dl+="<div class='dlOption'>"+$(this).val()+"</div>";
    });
    $("#helper").html(dl);
    $("#helper").width( $("#dlInput").width() );

    $(document).on("click","#dlInput",function(){
        // display list if it has value
        var lv=$("#dlInput").val();
        if( lv.length ){
                $("#orderTypes").attr("id","orderTypesHide");
                $("#helper").show();
        }
    });

    $(document).on("click",".dlOption",function(){
        $("#dlInput").val( $(this).html() );
        $("#helper").hide();
    });

    $(document).on("change","#dlInput",function(){
        if( $(this).val()==="" ){
            $("#orderTypesHide").attr("id","orderTypes");
            $("#helper").hide();
        }
    }); 
});

jsFiddle

Upvotes: 2

A. Meshu
A. Meshu

Reputation: 4148

Is this what you trying to do?

    var demoInput = document.getElementById('demoInput'); // give an id to your input and set it as variable
    demoInput.value ='books'; // set default value instead of html attribute
    demoInput.onfocus = function() { demoInput.value =''; }; // on focus - clear input
    demoInput.onblur = function() { demoInput.value ='books'; }; // on leave restore it.
    
<legend>(double) click on the input to see options:</legend>
    <input list="orderTypes" id="demoInput">
    <datalist id="orderTypes">
      <option value="Book">
      <option value="Copy">
      <option value="Page">
    </datalist>

The only "problem" here is that in order to see the options the user have to click the input again so it's like "double-click the input to see options".

Hope that helps.

Upvotes: 2

Related Questions