Question

我认为这必须是一个非常常见的用例：用户键入文本框，查找是针对显示选项的数据库。当用户完成（离开文本框）时，确定输入的值是否是从列表中选取的（因此已经存在于数据库中），如果没有做任何事情，则输入的值被插入数据库（因为它是新的）。

问题是，单击选项列表会导致/ focusout /这意味着我不知道用户是否因为已完成而离开文本框，或者因为他正在选择一个值。因此，我没有很好的方法知道何时应该插入数据库。如果他键入两个字符并找到匹配项，则单击项目列表将导致插入两个字符。

我已经开了a bug关于它并发现其他各种类似问题但没有解决方案。

我想不出解决这个问题的办法。我正在使用jquery-ui的1.8.10版本。有人可以帮忙吗？

Answer 1

失去焦点只是暂时的，你可以开始超时以延迟提交并取消它，如果该领域重新获得焦点。以下示例在处理之前等待0.5秒：

function BindTimeout($elem){
    $elem.data('timer', setTimeout(function(){
        $elem.removeData('timer');

        if($elem.hasClass('autocomplete-open')){
            BindTimeout($elem);
        } else {
            // Do whatever you need to do with the field value
        }
    }, 1000));
}

$('input').bind({
    focus: function(){
        clearTimeout($(this).data('timer'));
    },
    blur: function(){
        BindTimeout($(this));
    },
    autocompleteopen: function(){
        $(this).addClass('autocomplete-open');
    },
    autocompleteclose: function(){
        $(this).removeClass('autocomplete-open');
    }
});

编辑：当焦点丢失时，它会继续检查建议框是否仍然打开。

Answer 2

好吧，在多次哭泣和咬牙切齿之后，这就是答案：

不要理会自动填充的/ select /事件（在更改后发出时（在本练习中），它完全没用）。
在单击列表时设置标志。使用/ mousedown /而不是/ focus /，因为这发生在textbox的/ blur /之前
将数据库插入代码挂钩到文本框的/ change / event，而不是/ blur /（更好的语义）
对更改事件实施信号量检查
实现数据库存在检查信号量检查是否成功
插入数据库！

    // step 2
    $(".ui-autocomplete").mousedown(function() { ListExit = true; })

    // step 3
    $("#MyTextBox").change(function() {

        // step 4
       if (ListExist) {
          ListExit = false;
          return;
       }

       // step 5
       $.ajax({
           url: "@Url.Action("List", "MyController")",
           data: {term: $(this).val()},
           success: function(ls) {
               if (ls.length > 0) return;
               // step 6: do database insertion
           }
       });
    });

自动填充会在选择时生成失去焦点的事件

2 个答案: