自动完成(Jquery)焦点不绑定String属性

时间:2013-01-04 17:49:00

标签: spring jquery-ui autocomplete jquery-ui-autocomplete

我正在使用Spring MVC进行Auto complete(jquery)。我做了所有事情,数据在自动完成时正确显示,但属性不显示在焦点事件上。每当我打电话给" ui.item.username"在onfocus方法中,它总是显示空值。

$( "#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
                    }
                }));
            }
        });
    },

它可以正常工作,但是当我在onfocus方法中调用属性时(在下面的方法中),它显示为null 在焦点事件(jquery)

focus: function(event, ui) {
    alert($( event.target ).val(ui.item.ealName)); // it displays me null value at this point
},
select: function( event, ui ) {
}

有任何建议吗?

2 个答案:

答案 0 :(得分:1)

您在AJAX请求的success函数中构建的结果对象将用于自动完成小部件的所有方法/事件处理程序。如果您想稍后访问某个属性,则在构建要传递给response函数的数据源时,必须包含该属性:

success: function( data ) {
    response( $.map( data.zipcodes, function( item) {
        return {
            label: item.realName + item.realName,
            value: item.username,
            realName: item.realName // include realName
        }
    }));
}

(来自评论):

同样alert函数 返回null,因此如果您只想提醒值,请使用:

alert(ui.item.realName)

代替。

答案 1 :(得分:0)

我使用spring mvc实现了自动完成下拉。现在我的问题是当任何用户从自动完成下拉列表中选择/选择任何值时,那么我怎么能确定所选值是否正确?换句话说,我想确保用户是否从自动完成中选择了正确的值。因为用户可以在输入文本框中键入随机字符串并提交它(从技术上讲,我还确保当用户从下拉列表中选择任何值时,用户可以看到提交,如果用户输入的数据不正确,则该按钮不应该被激活)。

这是一个代码

<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,
                        }
                    }));
                }

                });
            },

上面的代码字很好,它从服务器获取列表并显示自动完成数据。在下面的代码我只是切换按钮。但我也确保当用户从下拉菜单中选择任何值,然后提交将是对用户可见,如果用户键入不正确的数据,则不应激活该按钮。

$('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');
    }
});