javascript - 自动完成 : prevent Change event after Select event

Question

用户可以输入输入值:

1. 从列表中选择一个(json 列表由 file.php 返回)。
2. 或者输入一个(我们通过 ajax 调用检查它是否存在，file2.php)。如果成功(值存在)，那么我们称之为“geo”。

问题是“geo”函数被调用了两次，因为change事件是在select事件之后调用的。

这是我的代码:

<input id="test">

$("#test").autocomplete({
    minLength: 2,
    source:  "file.php",
    select:function(event,ui){
        var name = ui.item.value;
        geo(name);
    },
    change: function (event, ui) {
        $.ajax({    
            type:'POST',
            async:false,
            url:'file2.php',
            data:{'name':$('#test').val()},
            success:function(r){
               o=JSON.parse(r);
               geo(o.name);
            }
        });
    }
});

我尝试添加 event.preventDefault();像这样:

select:function(event,ui){
            var name = ui.item.value;
            geo(name);
            event.preventDefault();
        },

但它不起作用...

有什么想法吗？

Answer 1

尝试示例:

var selectedName = '';

$("#test").autocomplete({
    minLength: 2,
    source:  "file.php",
    select:function(event,ui){
        selectedName = ui.item.value;
        geo(selectedName);
    },
    change: function (event, ui) {
        if (selectedName === $('#test').val()) {
            return;
        }
        $.ajax({    
            type:'POST',
            async:false,
            url:'file2.php',
            data:{'name':$('#test').val()},
            success:function(r){
               o=JSON.parse(r);
               geo(o.name);
            }
        });
    }
});