jQuery Autocomplete mustmatch doesn't have any effect

Question

I'm using jQuery 1.4.4 and jQuery UI 1.8.9. I have an autocomplete field that works really well, however I'd like to contrain the input to only what the autocomplete backend comes up with.

The documetation states:

mustMatch Boolean Default: false

If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box.

However, when I set mustMatch to true, it doesn't make any difference - I can still type in anything I like and nothing happens.

I'm fairly sure this is something I'm doing and not a bug as I haven't seen anything on google that points to that.

Here's a code snippet:

    $( ".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 );
            }
        });
    }
});

Can anyone see what I'm doing wrong? Thanks for your help!

Answer 1

If you want to clear, only to return a value judgment json data inside a wood there, you can then empty it.

如果想要清空，只需要判断返回的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 2

For those in need of complete and much simpler solution, try this...

$("#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 example: http://jsfiddle.net/dfc83/

Answer 3

You probably found this option on the documentation page for the deprecated plugin. jQueryUI's current documentation is located here.

It looks like they removed the mustMatch option, but according to this StackOverflow question, you can implement it yourself.