How to restrict an autoComplete field to only select from the suggestion box

Question

I have a jquery auto complete field and its working properly. Now I want to apply a validation that the field should only accept the value from the suggestion box. In other words user should not be able to input data which is not available in the suggestion box.

Here is my Jquery code

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

If they can only select input you are providing, why not make this a popup menu instead of a text input field? A ``. It can be done the way you are asking but it sounds like it would not be very intuitive. — l008com, Apr 19 '18 at 10:28
Possible duplicate of [jQuery UI AutoComplete: Only allow selected valued from suggested list](https://stackoverflow.com/questions/4952094/jquery-ui-autocomplete-only-allow-selected-valued-from-suggested-list) — Aref Ben Lazrek, Apr 19 '18 at 10:31
@l008com depends how many possible options there are...often autocomplete is used because a fixed dropdownlist would be unmanage-able - too many records — ADyson, Apr 19 '18 at 10:32

score 0 · Answer 1 · answered Apr 19 '18 at 12:11

Finally I found a solution for this

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

                });

How to restrict an autoComplete field to only select from the suggestion box

1 Answers1