jquery ui自动完成更改/关闭事件

时间:2013-07-04 18:25:41

标签: jquery jquery-ui

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

我的目的

我希望每当用户离开自动填充框出现的文本框时,处理程序将检查用户在文本框中输入的值是否必须是自动填充框的源数组中的值之一,如果它是no然后处理程序将提示错误并再次将焦点设置到此文本框。

例如

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

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

现在假设客户输入的值与数组中的任何值不完全匹配(不区分大小写),然后它会提示错误。

它应该工作正常,但只有当用户更改某些值时,假设作为用户我只在客户文本框中放置然后模糊文本框处理程序提示我消息,将焦点设置回客户文本框,然后如果我再次模糊,更改/关闭事件将不会根据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;
 }

谢谢Mihir

1 个答案:

答案 0 :(得分: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