D-W D-W - 3 months ago 18
jQuery Question

Jquery Ui Auto complete filter local JSON Array

Im pulling down a local json array and storing it when my page loads, however my results dont seem to filter?
Any ideas?

var invoiceList= @Html.Raw(
Json.Encode(
((IEnumerable<Invoice>)Model.InvoiceList)
.Select(inv=> new
{
Id = inv.Id,
Amount= inv.Amount
})
)
);


Html Result:

var invoiceList= [{"Id":"8da2786f-8f3d-496e-81eb-12be330cb67a","Amount":"100.00"},{"Id":"2D5A84EB-B146-43EE-8D28-8801F9F02027","Amount":"150.00"}];


HTML:

<input id="project" onkeydown="InvoiceSearch(this);">
<script>
function InvoiceSearch(elemt) {
var id = $(elemt).attr('id');
var searchTerm = $(elemt).val();
$("#project").autocomplete({
minLength: 1,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.Amount);
return false;
},
source: invoiceList,

select: function(event, ui)
{
$("#project").val(ui.item.Amount);
return false;
}
}).autocomplete( "instance" )
._renderItem = function( ul, item ) {
console.log(item);
return $( "<li>" )
.append( "<div>" + item.Amount+ "<br></div>" )
.appendTo( ul );
};
};
</script>

D-W D-W
Answer

The issue was due to name mappings, it wants a label and value, I was using a Id and Amount for my naming, so renamed my json results to label and value.

var invoiceList= [{"value":"8da2786f-8f3d-496e-81eb-12be330cb67a","label":"100.00"},{"value":"2D5A84EB-B146-43EE-8D28-8801F9F02027","label":"150.00"}];

Hope this helps anyone else.

Comments