Auto complete (Jquery) focus doesn't bind Spring Propety - spring

Question

I am working on Auto complete (jquery) using Spring MVC. I have done everything, data is displaying properly in auto complete but properties doesn't display onfocus event. Whenever i call "ui.item.username" in onfocus method, it always display me null value.
$( "#city" ).autocomplete({
minLength: 0,
source: function( request, response ) {
$.ajax({
url: "person.ajax",
dataType: "json",
data: {
maxRows: 6,
startsWith: request.term
},
success: function( data ) {
response( $.map( data.zipcodes, function( item) {
return {
label: item.realName + item.realName,
value: item.username
}
}));
}
});
},
it works fine till here but when i call property in onfocus methods (in following method), it displays me null
in focus event (jquery)
focus: function(event, ui) {
alert($( event.target ).val(ui.item.ealName)); // it displays me null value at this point
},
select: function( event, ui ) {
}
Any Suggestion?

Answer 1

The result object you're building in the success function of your AJAX request is used across all methods/event handlers of the autocomplete widget. If you want to access a property later, you'll have to include that property when you're building the data source you're passing to the response function:
success: function( data ) {
response( $.map( data.zipcodes, function( item) {
return {
label: item.realName + item.realName,
value: item.username,
realName: item.realName // include realName
}
}));
}
(From the comments):
Also the alert function does return null, so if you'd like to alert just the value, use:
alert(ui.item.realName)
instead.

Answer 2

I have implemented auto complete drop down using spring mvc. Now my question is when any user select/choose any value from auto complete drop down, then How can i sure that the selected value is correct or not? in other words i want to ensure that whether user selected the correct value from auto complete or not. Because user can type random string in input text box and submit it(Technically, i also make sure when user select any value from drop down, then submit will be visible to the user, and if user type incorrect data, the button shouldn't be activate).
Here is a code
<script>
$(function() {
$( "input[name='creditCheck']" ).autocomplete({
minLength: 2,
source:function( request, response ) {
$.ajax({
url: "creditCheck.ajax",
dataType: "json",
data: {
maxRows: 6,
startsWith: request.term
},
success: function( data ) {
response( $.map( data.creditCheckData, function( item) {
return {
creditName: item.creditName,
}
}));
}
});
},
The above code words fine, it get the list from server and displays the auto complete data.In following code i am just toggling the button.But i also make sure when user select any value from drop down, then submit will be visible to the user, and if user type incorrect data, the button shouldn't be activate.
$('input[name="creditCheck"]').bind("change keyup", function () {
if ($(this).val()!="") {
$(this).nextAll("button[name='add']:first").removeAttr('disabled');
} else {
$(this).nextAll("button[name='add']:first").attr('disabled', 'disabled');
}
});