如何限制autoComplete字段仅从建议框中选择

Question

我有一个jquery auto complete字段并且它正常工作。现在我想应用一个验证，该字段应该只接受建议框中的值。换句话说，用户不应该能够输入建议框中不可用的数据。

这是我的Jquery代码

＆＃13;

＆＃13;

 $( "#institutionName" ).autocomplete({
      source: function( request, response ) {
           $.ajax({
                url: instAutocompleteUrl,
                dataType: "json",
                data: {
                     searchText: request.term
                },
                beforeSend: function() {
                    $("#institutionName").css("background","#FFF url(${resource(dir: 'images', file: '../images/LoaderIcon.gif')}) no-repeat 165px");
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.Inst_name,
                            value: item.Inst_name,
                            id: item.InstID
                        };
                     }));
                     $("#institutionName").css("background","#FFF");
                }
          });
     },
     select: function(event, ui ){
         console.log(ui);
         $('#instId').val(ui.item.id);
     }
 });

＆＃13;

＆＃13;

＆＃13;

Answer 1

最后我找到了一个解决方案

＆＃13;

＆＃13;

            $( "#institutionName" ).autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url: instAutocompleteUrl,
                        dataType: "json",
                        data: {
                            searchText: request.term
                        },
                        beforeSend: function() {
                            $("#institutionName").css("background","#FFF url(${resource(dir: 'images', file: '../images/LoaderIcon.gif')}) no-repeat 165px");
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Inst_name,
                                    value: item.Inst_name,
                                    id: item.InstID
                                };
                            }));
                            $("#institutionName").css("background","#FFF");
                        }
                    });
                },
                select: function(event, ui ){
                    console.log(ui);
                    $('#instId').val(ui.item.id);
                    valid = true;
                },
                close: function() {
                    if (!valid){
                        $(this).val('');
                        $('#instId').val("");
                    }
                },
                change: function (event, ui ) {
                    if (ui.item == null || ui.item == typeof undefined){
                        $(this).val("");
                        $('#instId').val("");
                    }
                }

                });

＆＃13;

＆＃13;

＆＃13;