Angular Angular - 3 months ago 13
jQuery Question

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

Answer

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