Using jQuery is there a way to capitalize the first letter of each word in a datalist option value

Question

I have an input form with a datalist of options. I would like to capitalize the first letter of each word in the value attribute.

What I have:

<div class="input-group">
<input type="text" name="q" id="s" list="states" class="form-control" placeholder="Enter State Name Here" data-bvalidator="required">
<datalist id="states">
    <option value="New hampshire"></option>
    <option value="New jersey"></option>
    <option value="New mexico"></option>
    <option value="New york"></option>
    <option value="North carolina"></option>
    <option value="North dakota"></option>
    <option value="Rhode island"></option>
    <option value="South carolina"></option>
    <option value="South dakota"></option>
    <option value="West virginia"></option>
</datalist><span class="input-group-btn"><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-play"></span></button>
</span>

What I need:

<div class="input-group">
<input type="text" name="q" id="s" list="states" class="form-control" placeholder="Enter State Name Here" data-bvalidator="required">
<datalist id="states">
    <option value="New Hampshire"></option>
    <option value="New Jersey"></option>
    <option value="New Mexico"></option>
    <option value="New York"></option>
    <option value="North Carolina"></option>
    <option value="North Dakota"></option>
    <option value="Rhode Island"></option>
    <option value="South Carolina"></option>
    <option value="South Dakota"></option>
    <option value="West Virginia"></option>
</datalist><span class="input-group-btn"><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-play"></span></button>
</span>

Possible duplicate of [this SO answer](https://stackoverflow.com/questions/2017456/with-jquery-how-do-i-capitalize-the-first-letter-of-a-text-field-while-the-user) — Korgrue, Jul 05 '17 at 19:42

score 0 · Answer 1 · answered Jul 05 '17 at 19:45

0

in your css, put:

#s option {
text-transform: capitalize;
}

answered Jul 05 '17 at 19:45

Count32

9
4

This does not actually work. I am at a loss as to why, though. – Count32 Jul 05 '17 at 19:54
there is a typo it is '#states' not '#s' – axel.michel Jul 05 '17 at 20:00
#states is within #s, and yet making the change to #states does nothing. – Count32 Jul 05 '17 at 20:08
Correct, sorry, did not see the "s" id of the input field. – axel.michel Jul 05 '17 at 20:12

axel.michel · Answer 2 · 2017-07-05T20:00:41.450

Untested, but it should work something like this, for the replace method have a look at this answer:

function toTitleCase(str) {
    return str.replace(/\w\S*/g, function(txt) { 
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}
// grep all options 
var dataList = $('#states').find('option');
// loop over them
dataList.each(function() {
    // and replace the original value
    this.value = toTitleCase(this.value);
});

Using jQuery is there a way to capitalize the first letter of each word in a datalist option value

2 Answers2