2

我在我的一个项目中使用 jQuery UI 自动完成功能。

我的目的

我希望每当用户离开出现自动完成框的文本框时，处理程序将检查用户在文本框中输入的任何值必须是自动完成框源数组中的值之一，如果不是，则处理程序将提示错误并再次将焦点设置到此文本框。

例如

var customerNames = ['CA','BA','DA','AA'];

$('#customer').autocomplete({
     source: customerNames,
     change : function(event,ui){
         // handles event
     }
});

现在假设客户输入的值与数组中的任何值都不完全匹配（不区分大小写），那么它会提示错误。

它应该可以正常工作，但只有当用户更改某些值时，假设作为用户我只在客户文本框中输入 a 然后模糊文本框，处理程序提示我消息，将焦点设置回客户文本框，然后如果我再次模糊它不会根据 jQuery 文档触发更改/关闭事件，因为文本框的值没有更改。

我的问题

我如何覆盖更改/关闭事件的默认行为，以便每次都会触发它们，而不管用户所做的更改如何？

                   OR

还有其他方法可以实现我的目标吗？

请随时问我问题。

更新于 2013 年 7 月 5 日

根据@roasted 评论，我将我的解决方案实现如下。如果有人有任何建议，请给我任何建议。

$('#customer').autocomplete( {
                        source : function(request, resolve) {
                            // fetch new values with request.term
                            resolve(customerNames);
                        }
                    });// ends customer autocomplete

                   $("#customer").blur(function(){

                        var inputText = this.value;

                        if(inputText === '' || inputText.length == 0){
                            return;
                        }

                        if(checkAvailable(inputText,customerNames)){
                            return;
                        }else{
                            alert(" you have to select one of the value \n from given box.");
                                setTimeout(function(){
                                    $('#customer').val('');
                                    $('#customer').focus();         
                                },10);
                        }
                   });// ends customer blur

我稍微修改了以下功能

function checkAvailable(term,availableTags) {

    var length = term.length,
         term = term.toLowerCase();

     for (var i = 0, z = availableTags.length; i < z; i++)
     if (availableTags[i].toLowerCase() === term) return true;


     return false;
 }

谢谢米希尔

4

1 回答 1

1

您使用一种mustmatch选项，这里使用一种checkAvailable方法：

 function checkAvailable(term) {
     var length = term.length,
         chck = false,
         term = term.toLowerCase();
     for (var i = 0, z = availableTags.length; i < z; i++)
     if (availableTags[i].substring(0, length).toLowerCase() === term) return true;


     return false;
 }

在您编辑之后，我只是重写了一点您的blur处理程序：

$("#customer").blur(function () {

    var self = this,
        inputText = self.value;

    if ($.trim(inputText === '') || checkAvailable(inputText, customerNames)) return;


    alert(" you have to select one of the value \n from given box.");
    setTimeout(function () {
        $(self).val('').focus();
    }, 10);

}); // ends customer blur
于 2013-07-05T09:10:36.367 回答