jqueryui autocomplete with json does nothing - asp.net

Question

BLUF: I have jqueryui autocomplete wired into an AJAX-y JSON-y DB lookup. It calls the page correct, and the page returns JSON. However, it doesn't actually load those results into the UI. It appears to very slowly do nothing.
Relevant JS:
$(function () {
$("#searchtext").autocomplete({
source: function (request, response) {
$.getJSON("<%=ResolveUrl("~/getPeople?prefix=") %>" + request.term, function (data) {
response($.map(data.dealers, function (value, key) {
return {
label: value,
value: key
};
}));
});
},
select: function (e, i) {
$("#personID").val(i.item.val);
},
minLength: 2,
delay: 100
});
});
Code of getPeople.aspx:
Response.Headers.Add("Content-type", "text/json")
Response.Headers.Add("Content-type", "application/json")
Dim prefix
prefix = Request.QueryString("prefix")
Dim PDU_CS = System.Configuration.ConfigurationManager.ConnectionStrings("PDU").ConnectionString
Using PDU_Connection As New System.Data.SqlClient.SqlConnection()
PDU_Connection.ConnectionString = ConfigurationManager.ConnectionStrings("PDU").ConnectionString
Using PDU_Command As New System.Data.SqlClient.SqlCommand()
PDU_Command.CommandText = "select id, [name] FROM vw_Staff WHERE [name] LIKE #searchtext + '%'"
PDU_Command.Parameters.AddWithValue("#searchtext", prefix)
PDU_Command.Connection = PDU_Connection
PDU_Connection.Open()
Using sdr As System.Data.SqlClient.SqlDataReader = PDU_Command.ExecuteReader()
Dim dt As New DataTable
dt.Load(sdr)
Dim sData As String = JsonConvert.SerializeObject(dt)
Response.Write(sData)
End Using
PDU_Connection.Close()
End Using
End Using
Actual output from getPeople.aspx?prefix=Gibson
[{"id":5854,"name":"GIBSON, NICHOLAS"}]

Answer 1

Would suggest two changes:
$(function() {
$("#searchtext").autocomplete({
source: function(request, response) {
$.getJSON("<%=ResolveUrl("~/getPeople?prefix=") %>" + request.term, function (data) {
response($.map(data.dealers, function(value, key) {
return {
label: value.name,
value: value.id
};
}));
});
},
select: function(e, i) {
$("#personID").val(i.item.value);
return false;
},
minLength: 2,
delay: 100
});
});
Since you're passing an Array of Object to $.map(), you need interact with each Object, in this case the value of the array.
select has ui, in your case, just i, and it is i.item.value, not i.item.val.
Reference: https://jqueryui.com/autocomplete/#custom-data