How to autocomplete a <li> with <a> - html-lists

Question

I have generated a list with links inside in hierarchy. I am trying to make a form/input to let people type in words and it fetch the list(in hierarchy) with autocomplete. The autocomplete results are links. Any help would be great. Thanks
Something like this
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>

Answer 1

Collect the autocomplete strings in an array using a JQuery selector and a map function
$(function() {
var availableTags = $('ul > li > a').map(function() {
return this.href;
}).toArray();
$("#tags").autocomplete({
source: availableTags
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>Items autocomplete</label>
<input id="tags" type="text" style="width: 200px;">
<span id="results_count"></span>
<p>
<ul>
<li>
1
<ul>
<li>1.1
</li>
<li>1.2
</li>
</ul>
</li>
<li>
1
<ul>
<li>1.1
</li>
<li>1.2
</li>
</ul>
</li>
</ul>
EDIT: second version where autocomplete uses the text in the <li>'s
$(function() {
var availableTags = $('ul > li > a').map(function() {
return $(this).text();
}).toArray();
$("#tags").autocomplete({
source: availableTags
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>Items autocomplete</label>
<input id="tags" type="text" style="width: 200px;">
<span id="results_count"></span>
<p>
<ul>
<li>
xxxx
<ul>
<li>xxyy
</li>
<li>xxzz
</li>
</ul>
</li>
<li>
xxyy
<ul>
<li>yyzz
</li>
<li>xxyz
</li>
</ul>
</li>
</ul>
Jsfiddle

Answer 2

see datalist and list in html5
datalist
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Answer 3

$(function() {
var availableTags = $('ul > li > a').map(function() {
console.log($(this));
return {
label: $(this).text(),
value: $(this).attr('href')
};
}).toArray();
$("#tags").autocomplete({
source: availableTags,
select: function (event, target) {
var link = target.item.value;
console.log(link);
location.href = link;
}
});
});