How could I get the text and href value in HTML and then set them to values & labels in autocompelte of JQuery UI

Question

Currently I get this

JS

$(function() {
$("#nav-list123").fadeOut();
$('input').autocomplete({
    source: function(req, response) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var sources = $('.search').select ('li'); 
        response($.grep(sources.text(), function(item){return matcher.test(item.label); }) );
    },
    select: function(event, ui) {
        $('#state_id').val(ui.item.label);
        $('#abbrev').val(ui.item.value);
    }
});});

within this html

<div><form class="form-search"><input id="autocomplete" type="text"/></form>
<div id="nav-list123">                   
    <ul class="search">
    <li><a href="/order_gen/address/1/">  Kitchen Visions</a></li>
    <li><a href="/order_gen/address/4/">  Full Name</a></li>
    <li><a href="/order_gen/address/23/">  Job B</a></li>
    </ul>
</div>

I want to get the elements attributes in the <li>, i tried using .text() or .html() to get text, but I do not know how to convert these attributes to label and value in autocomplete function from JQuery UI to get the match elements.

Could anyone help me? Thanks

Answer 1

You should store the value & href of ul li into an javascript array on page load
& pass this array in autocomplete source

var arr = new Array();
$('ul > li').each(function(){
var temp_obj = {
label:$(this).children('a').attr('href'),
value:$(this).children('a').text().trim()
}
arr.push(temp_obj);
});

//Pass this array in autocomplete source
$('input').autocomplete({
focus: function( event, ui ) {
$( "#your_id" ).val( ui.item.value );
return false;
},
source: arr
});