CODEWITHSUNDEEP
javascriptjquery
Angular
Angular

Reputation: 623

Simple jQuery loop through <li> element and add to <datalist>

Something's wrong with my jQuery loop, it's not displaying the values of my li elements. I'm getting something like [object HTMLElement] in my input search bar.

<div id="sidebar-wrapper">
   <input type="text" list="searchList" class="search" size="20" placeholder="Search..." /> 
    <datalist id="searchList"> </datalist>

        <ul class="sidebar-nav" id="menu">

            <li>
                <a id="item1" href="#item1">item1 </a>
            </li>
            <li>
                <a id="item2" href="#item2">item2</a>
            </li>

        </ul>
    </div>
<br>

 $('.sidebar-nav li').each( function(index,item) {
        var option = $('<option value="'+item+'">');
        $('#searchList').append(option);
    });

enter image description here

Upvotes: 3

Views: 1377

Answers (1)

brk
brk

Reputation: 50291

Here item will be li dom elements, So you are seeing object HTMLLIELEMENT

You need to capture the text of each li. You can use jquery text method. Also trim to remove any white space

 $('.sidebar-nav li').each( function(index,item) {
 console.log(item)
        var option = $('<option value="'+$(item).text().trim()+'">');
        $('#searchList').append(option);
    });

JSFIDDLE

Upvotes: 2

Related Questions