jQuery Autocomplete Mustmatch не имеет никакого эффекта

Question

Я использую jQuery 1.4.4 и jQuery UI 1.8.9.У меня есть поле автозаполнения, которое работает очень хорошо, однако я бы хотел ограничить ввод только тем, что предлагает бэкэнд автозаполнения.

Документация гласит:

mustMatch BooleanПо умолчанию: false

Если установлено значение true, автозаполнение будет разрешать только результаты, представленные серверной частью.Обратите внимание, что недопустимые значения приводят к пустому полю ввода.

Однако, когда я устанавливаю mustMatch в значение true, это не имеет никакого значения - я все равно могу вводить все, что мне нравится, и ничего не происходит.

Я вполне уверен, что это то, что я делаю, а не ошибка, поскольку я не видел в Google ничего такого, что указывало бы на это.

Вот фрагмент кода:

    $( ".client" ).autocomplete({
    minLength: 2,
    mustMatch: true,
    source: function( request, response ) {
        var term = request.term;
        if ( term in client_cache ) {
            response( client_cache[ term ] );
            return;
        }

        client_lastXhr = $.getJSON( "amex/start.php?action=autocomplete&field=client", request, function( data, status, xhr ) {
            client_cache[ term ] = data;
            if ( xhr === client_lastXhr ) {
                response( data );
            }
        });
    }
});

Кто-нибудь может увидеть, что я делаю не так?Спасибо за вашу помощь!

Answer 1

Возможно, вы нашли эту опцию на странице документации для устаревшего плагина.Текущая документация jQueryUI находится здесь .

Похоже, что они удалили опцию mustMatch, но согласно этому вопросу StackOverflow , вы можете реализовать его самостоятельно.

Answer 2

Если вы хотите очистить данные только для того, чтобы возвращать данные оценки json внутри дерева, вы можете очистить их.

如果 想要 清空, 只 需要 判断 返回 的 JSON 里面 的 某 值 有 木 有 数据, 然后 清空 就 可以 啦.

function selectRegion(){
$("#saleRegionSelect").autocomplete({
    source: function (request, response) {
        var cityId=$("[name='city']").val();
        var oppType=$("[name='primaryBiz']:checked").val();
        var site= $.trim($("#channel").val());
        if(oppType==undefined){
            return false;
        }
        if(site==undefined){
            return false;
        }
        $.ajax({
            url: rootPath + "ajax/regionByCityAndSite",
            dataType: "json",
            type: "post",
            data: {
                region: request.term,
                city:cityId,
                site:site,
                oppType:oppType
            },
            success: function (data) {
                if (!data.rows) { //Look at this line

                    $('#saleRegionSelect').val('');//clear
                    $('#saleRegion').val(''); //clear

                    response(($.map([], function (item) {
                        return {}
                    })));
                } else {
                    response(($.map(data.rows, function (item) {
                        return {
                            label: item.region + ($.trim(item.saleName)==""?"":' (' + item.saleName + ')'),
                            value: item.region + ($.trim(item.saleName)==""?"":' (' + item.saleName + ')'),
                            id: item.id
                        }
                    })));
                }
            }
        })
    },
    minLength: 1, 
    select: function (event, ui) {
        $("#saleRegion").val(ui.item.id);
    }
});

}

=> json:

{
"status": 200,
"message": "查询数据成功！",
"rows": [{
    "id": "678140138089353216",
    "oppType": 10,
    "saleId": "201402201431456839e855",
    "saleName": "陈",
    "creator": "zhangdanling",
    "createTime": "2015-12-19 17:26:29",
    "modifier": "zhangdanling",
    "modifyTime": "2015-12-22 11:11:35",
    "cityId": 147,
    "site": 1,
    "region": "测试测试",
    "remark": ""
}, {
    "id": "678847511099609088",
    "oppType": 10,
    "saleId": "201402201431456839e855",
    "saleName": "陈",
    "creator": "zhangdanling",
    "createTime": "2015-12-21 16:17:23",
    "modifier": "zhangdanling",
    "modifyTime": "2015-12-22 15:55:59",
    "cityId": 147,
    "site": 1,
    "region": "测试一区",
    "remark": ""
}, {
    "id": "678910954649423872",
    "oppType": 10,
    "saleId": "201402201431456839e855",
    "saleName": "陈",
    "creator": "zhangdanling",
    "createTime": "2015-12-21 20:29:30",
    "modifier": "zhangdanling",
    "modifyTime": "2015-12-21 20:29:30",
    "cityId": 147,
    "site": 1,
    "region": "测试区域三",
    "remark": ""
}, {
    "id": "679596181579374592",
    "oppType": 10,
    "saleId": "201407081036237ccfe9dc",
    "saleName": "张",
    "creator": "zhangdanling",
    "createTime": "2015-12-23 17:49:05",
    "modifier": "zhangdanling",
    "modifyTime": "2015-12-23 17:49:14",
    "cityId": 147,
    "site": 1,
    "region": "测试一下",
    "remark": ""
}, {
    "id": "680322348053700608",
    "oppType": 10,
    "saleId": "201407081036237ccfe9dc",
    "saleName": "张",
    "creator": "SYS_INIT",
    "createTime": "2015-12-25 17:54:20",
    "modifier": "SYS_INIT",
    "modifyTime": "2015-12-25 17:54:20",
    "cityId": 147,
    "site": 1,
    "region": "测试一下001",
    "remark": ""
}, {
    "id": "681308156487278592",
    "oppType": 10,
    "saleId": "201402201431456839e855",
    "saleName": "陈",
    "creator": "zhangdanling",
    "createTime": "2015-12-28 11:11:56",
    "modifier": "zhangdanling",
    "modifyTime": "2015-12-28 11:11:56",
    "cityId": 147,
    "site": 1,
    "region": "测试离职销售区域",
    "remark": ""
}]

}

Answer 3

Для тех, кому нужно полное и гораздо более простое решение, попробуйте это ...

$("#my_autocomplete").autocomplete({
    source: "my_data.php",
    change: function(e, ui) {
        if (!ui.item) {
            $(this).val("");
        }
    },
    response: function(e, ui) {
        if (ui.content.length == 0) {
            $(this).val("");
        }
    }
}).on("keydown", function(e) {
    if (e.keyCode == 27) {
        $(this).val("");
    }
});

Пример JSFiddle: http://jsfiddle.net/dfc83/