D-W D-W - 5 months ago 30
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(
.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"}];


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

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


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.